Changing a css variable in styled components from a React props

Question

I am using CSS grid to create a dynamic table. The number of columns and rows are dynamic and are based on props I get from an higher component in React.

How can I change a css variable inside a styled component (emotion) to the data I get from a React props?

Ertan Hasani · Accepted Answer · 2019-04-16 13:45:16Z

1

Here it is in their documentation: https://www.styled-components.com/docs/basics#passed-props

// Create an Input component that'll render an <input> tag with some styles
const Input = styled.input`
  padding: 0.5em;
  margin: 0.5em;
  color: ${props => props.inputColor || "palevioletred"};
  background: papayawhip;
  border: none;
  border-radius: 3px;
`;

// Render a styled text input with the standard input color, and one with a custom input color
render(
  <div>
    <Input defaultValue="@probablyup" type="text" />
    <Input defaultValue="@geelen" type="text" inputColor="rebeccapurple" />
  </div>
);

answered Apr 16, 2019 at 13:45

Ertan Hasani

1,78316 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Changing a css variable in styled components from a React props

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related