Изменение переменной CSS в стилизованных компонентах из реквизита React

Question

Я использую сетку CSS для создания динамической таблицы. Количество столбцов и строк является динамическим и основано на подпорках, которые я получаю от более высокого компонента в React.

Как я могу изменить переменную CSS внутри стилизованного компонента (эмоции) на данные, которые я получаю от реквизита React?

Answer 1

Вот в их документации: https://www.styled -components.com / docs / basics # прошло-реквизит

// 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>
);