I try to pass the prop being a function (returning boolean) call to Styled Components with no effect.It looks like there is no length applied at all.
I have also tried syntax where "lenth" is fixed and only its value is function return, but stick to this version as clearer for me. also (props.length) without clear comparision and many other combinations.
That is how my styled element is styled
export const header = {
cell: styled.th`
background-color: rgba(188, 107, 63, 0.3);
vertical-align: bottom;
border: none;
padding: 0.75rem;
cursor: pointer;
vertical-align-middle;
${props => ((props.length === true) ? 'length: 30%;' : 'length: 13%;')};
`,
};
That is my function that returns desired prop
const isThisFirstOrSecondColumn = x => x === 0 || x === 1;
That is how my header.cell component is applied (part only, it's a little longer)
return (
<tr onClick={handleSort}>
{headers.map((item, index) => (
<header.cell
length={isThisFirstOrSecondColumn(index)}
key={item}
length is no valid css property and therefore your length prop has no effect. Also you would want only pass the values like this:
width: ${props => props.length ? '30%' : '13%'};
Otherwise you would have to use
${props => props.length ? css`width: 30%;` : css`width: 13%;`}
vertical-align-middle; is also not valid css. Other than that your code looks okay.
Related
EDIT: Actually I was wrong, the first example also doesn't work! It also interpolates the code!!
I'm experimenting with styled-components css prop api and I ran into the following problem:
This code works well:
const myCss = css<PropsWithTheme>`
width: 100px;
height: 100px;
color: ${props => props.theme.color};
`
const MyComponent = () => <div css={myCss.toString()} />
But the following does not:
const getCss = (color: strinbg) => css<PropsWithTheme>`
width: 100px;
height: 100px;
color: ${color}; // I tried injecting the color directly
color: ${() => color}; // And also returning it from a callback inside the css``, just as I would access props/theme
`
const MyComponent = () => <div css={getCss('red').toString()} />
The output css here is width: 100px; height: 100px; color: ,red,; ,() => color,;, which is obviously not valid.
Using template string interpolation to stringify the output solves the problem, but results in very bad readability due to Prettier enforcing this format:
const MyComponent = () => (
<div
css={`
${getCss('red')}
`}
/>
)
Unfortunately moving the inerpolation anywhere outside the css prop definition ( in component body or creating a stringify function) breaks the functionality (either prop/theme access, all css doesn't get applied at all).
It seems to be related to this issue: https://github.com/styled-components/styled-components/issues/1641, but the suggested solution there is to use the css helper function, which I'm already doing :(
Is there an easy fix to my problem?
Styled Components let you use props in your CSS, eg.:
styled.whatever`
margin: ${props => props.bigMargin ? '20px' : '5px'}
`;
However, I just tried to use the props in the style name instead:
styled.whatever`
margin-${props => props.leftmargin ? 'left' : 'right'}: 10px;
`;
and when I do that, in the Chrome debugger it looks like:
margin-right: ;
: 1em;
Is it not possible to change your style names using props, or am I just doing it wrong somehow?
The only way I could get it to work was to put both the name and value into the props-controlled part:
${({ leftmargin }) =>
leftmargin ? `margin-left: 1em` : `margin-right: 1em`}};
This works, but if anyone has a better answer (a "DRY-er" one), I'll happily accept it.
Im testing using react-testing-library and jest-styled-components.
I have a wrapper component that renders the styles of its child button dependant on a selected prop passed to it.
This is the code:
const selectedStyles = css`
background-image: url(../image);
background-position: center;
background-repeat: no-repeat;
border-color: ${color.grey6};
height: 38px;
width: 58px;
& span {
display: none;
}
`;
const ButtonWrapper = styled.div`
& button {
font-size: 15px;
line-height: 20px;
padding: 8px 12px;
${props =>
props.selected
? css`
${selectedStyles}
`
: ""}
&:hover,
:focus {
${props =>
props.selected
? css`
${selectedStyles}
`
: ""}
}
}
`;
and the test
test("it renders the correct styles when selected ", () => {
const { container } = render(<CheckButton selected>Add</CheckButton>);
const button = container.querySelector("button");
expect(button).toHaveStyleRule("background-position", "center");
});
but its failing with "Property 'background-position' not found in style rules" which is true for the original button, however when its parent is passed the selected prop this style applies.
I am also doing snapshot testing with the component however not testing the props getting passed brings the test coverage down.
Can anyone help?
In general as far as nested styles testing is concerned, I would recommend testing directly the nested element.
I personally haven't figured out a way to test nested styles using the .toHaveStyle(``); (not even a simple
a {
text-decoration: none;
}
)
so I ended up querying for the exact component I wanted to test, eg:
expect(screen.getByText(/text-within-the-child-component/i)).toHaveStyle(`
text-decoration: none;
`);
In your specific case I believe the way to go is to render your component in your test directly with the props that trigger the styles you want for each case (selected in your code example).
For those who are facing the same problem toHaveStyleRule accept a third "options" parameter after property and value where you can path a modifier:
test("it renders the correct styles when selected ", () => {
render(<CheckButton selected>Add</CheckButton>);
const button = container.querySelector("button");
expect(screen.getByText("Add").parentElement).toHaveStyleRule("background-position", "center", { modifier: 'button' });
});
Here I state on the fact that "Add" is the button text and its parent is the component ButtonWrapper.
By the way, you should avoid as much as possible using querySelector (here I'm using react testing library).
https://github.com/styled-components/jest-styled-components
Ive got a basic styled component working. When the prop isHere is passed then the background is blue.
const Item = styled.ul`
${props => console.log(props.theme.colorGroupSelected)};
${props => (props.isHere ? `background:` + 'blue' : null)};
`;
Instead of blue I need to use the colour colorGroupSelected from my theme but I cant get it to work, I keep getting a syntax error.
const Item = styled.ul`
${props => (props.isHere ? `background:` + props => props.theme.colorGroupSelected : null)};
`;
My code is getting quite hard to read. Is it possible to destructure a variable within a styled block? Something like this:
${const colorGroupSelected = (props => return props.theme.colorGroupSelected)};
${props => (props.isHere ? `background:` + colorGroupSelected : null)};
This works but doesn't destructure the variable:
${props => (props.isHere ? `background:` + props.theme.colorGroupSelected : null)};
I am running into an off issue where my innerRef prop on a component is getting totally swallowed, and never ran.
Here is what my component implementation looks like:
<StyledPopOver
innerRef={el => (this.popOverEl = el)}
transitionState={transitionState}
animationTiming={animationTiming}
style={this.getAnchorPosition()}
{...styledProps}
>
{children}
</StyledPopOver>
And here is what the style component definition looks like:
const StyledPopOver = styled.div`
display: table-cell;
transform-origin: top;
transition-property: all;
position: fixed;
z-index: 9998;
opacity: 0;
transform: scaleY(0);
${props => {
switch (props.transitionState) {
case ENTERING:
return css`
opacity: 1;
transform: scaleY(1);
transition-duration: ${passedProps =>
passedProps.animationTiming.enter}ms;
`
case ENTERED:
return css`
opacity: 1;
transform: scaleY(1);
`
case EXITING:
return css`
transition-duration: ${passedProps =>
passedProps.animationTiming.exit}ms;
`
default:
return null
}
}};
`
If I log the props being passed into the styled component, I can see innerRef. But if I put a log in my ref setter, it never gets called.
The only thing additionally special about this is that the component is being rendered as a child of a React 16 Portal. That said, I just tested pulling the portal out of the tree, and I get the same result.
I figured this one out, and at the end of the day it is a lesson, so I figured I'd provide my solution.
It turns out that higher up in my tree, I was using "innerRef" in a way that was cascading down to children using {...styledProps}
What I learned is that innerRef should only ever be used as a prop name on a direct styled component. If not a direct styled component, it should only ever be ref (when interacting with a HTML element), or a name other than innerRef (when doing anything special about which element gets the ref handler.