Я использую сетку CSS для создания динамической таблицы. Количество столбцов и строк является динамическим и основано на реквизитах, которые я получаю от более высокого компонента в React.
Как я могу изменить переменную css внутри стилизованного компонента (эмоции) на данные, которые я получаю из реквизита React?
Вот это в их документации: 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>
);
