Here is my code:
${({ left }) =>
css`
margin-${left ? 'right' : 'left'}: 30vw;
`};
This is being used in a style component, when I pass the left prop using the styled component it doesn't work, I think there is a problem with the syntax. Please, can someone help me?
Related
I'm creating AccordionSections for every element I get from my backend this way
<AccordionSection
defaultOpen={activePackage}
headingLevel="h3"
id={
activePackage
? `active-${packageObj.type}-${key.toString()}`
: `${packageObj.type}-${key.toString()}`
}
label={label}
key={`${key.toString()}-${packageObj.type}`}
>
I'm wrapping this Accordion sections in a styled Accordion component:
<Wrapper spaceStackEnd="s">{content}</Wrapper>;
I want to show the label with the green colour only for the AccordionSection that start with active in the id:
const Wrapper = styled(Accordion)`
span > {
&:first-child {
${(properties) =>
properties.id?.startsWith('active') &&
css`
color: green;
`};
}
}
`;
Span is because the generated elements are spans. Nothing is happening. am I missing something ?
You can pass a parameter active to your component. If you have children I assume that you have multiple components. So in order to render multiple components developers usually use the map() function. The second argument of the map() function is the place of the component you want to render based on the array of data you have. you can simply do this:
<YourComponent {...yourProps} active={index === 0? "green" :
"black(default color you set)"} />
and then pass that active prop to your styled-components.
if you want know more about this you can visit this link.
I have the follwing styled component, I am trying to pass a prop to it and use it in a pseudo element selector, in this case before. However, it does not work as expected.
However, if I pass the same prop to the background css property or any other property, it works completely fine
Is the following allowed when using styled components?
const Label = styled.label`
/* This did not work */
&::before {
content: ${(props) => (props.field ? "Hi" : "")};
}
/*But this works perfectly fine*/
background: ${(props) => (props.field ? "palevioletred" : "white")};
`;
const Input = styled.input`
height: 32px;
`;
If you check devtools, you'll see that your CSS rule is making it to the DOM, but it's an invalid value for the content property. It's raw text, with no quotes: Hi. It needs to be "Hi".
Try doing (notice the backticks for a new template string literal):
content: ${(props) => (props.field ? `"Hi"` : "")};
I have a little problem with react-select component restyling. If you take a look on their official doc you'll see all the attributes that can be restyled. The problem I have is that around the text I write there's blue borders, and can't remove them. Also around the container.
If I inspect it here's what I get:
It has as id react-select-3-input and can't remove that even if I write directly on chrome inspection let alone doing it in the code.
I am using nextjs as framework and I added a file style.css and import it into _app.tsx. I tried adding this to see what happens:
#react-select-2-input {
background-color: red;
color: red;
font-size: 40;
background-color: red;
}
But nothing happens.
How do you think I can fix this?
If you read the documentation for react-select you can see that the docs steer you towards using emotion more than straight forward CSS.
When implementing this you work should do something like this:
const reactSelectStyles = {
singleValue: (provided, state) => ({
...provided,
color: 'inherit',
}),
menu: (provided, state) => ({
...provided,
'z-index': 9,
}),
multiValue: (provided, state) => ({
...provided,
color: state.isDisabled ? "#000" : "#fff",
}),
};
This will create an object that you then can use for styling
<Select
styles={reactSelectStyles}
/>
Provided in the code above makes sure that the default styling is included (so you can omit it if you want to) and the state can be used to do render different styles depending on the state of the react-select.
I would say that you overall will have a harder time solving this using regular CSS since react-select (using emotion) will generate dynamic CSS classes that does not collide with each other.
I have passed props to styled components before and am familiar with this convention.
<Card data={props.color}>
const Card = styled.div`
margin-right: ${(props) => (props.data === "BlueSquare" || "RedSquare" ? "5px" : "15px")};
`;
What I am having trouble with is converting this type of conditional styling to a styled component
background: linear-gradient(${ColorFunction({value: props.audited ? props.score : props.remScore,
})}, white);
Any help would be greatly appreciated.
Pass callback which accept props and return css property value in template literal with used values from props.
In your case, pass callback which accept props and return linear-gradient in template literal with used values from props.
background: ${props => `linear-gradient(${ColorFunction({value: props.audited ? props.score : props.remScore,
})}, white)`};
I have a Parent that has a deeply nested child which can get an attribute if selected.
How do I style the background-color of the parent, only if a deeply nested child has an attribute of 'selected'?
<Parent>
<Child>
<NestedChild selected>
This is what I have tried:
const Parent = styled.div`
&[selected] { // But this only styled the child, not the parent}
`;
The CSS way
There isn't one - CSS doesn't allow an element to affect styling of its parents, only that of its children or siblings.
The React purist way
Use the useContext hook along with createContext and a context Provider, or simply pass a callback down through all the nested levels.
The hacky-yet-simple React + vanilla JavaScript way
// set up some styles for `has-child-selected` class
// ...
const Parent = ({ ... }) => {
return <div className="parent">
...
</div>
}
const Child = ({ selected }) => {
const ref = useRef(null)
useEffect(() => {
ref.current.closest('.parent')
.classList[selected ? 'add' : 'remove']('has-child-selected')
}, [selected])
return <div ref={ref}>
...
</div>
}
Edit: I realized I didn't even mention Styled Components in this answer, but I don't think it would change very much. Perhaps someone with more knowledge of Styled Components would be able to enlighten.
I think you can do it with CSS only. So I remember at least. try this.
you can change any tag, and any attr
li:has(> a[href="https://css-tricks.com"]){
color:red;
}
Looks Like it doesn't work at this time. but check when you see this.
:D :D