从 React 道具更改样式组件中的 css 变量

【问题标题】：Changing a css variable in styled components from a React props从 React 道具更改样式组件中的 css 变量
【发布时间】：2019-09-06 15:28:30
【问题描述】：

我正在使用 CSS 网格来创建动态表格。列数和行数是动态的，并且基于我从 React 中的更高组件获得的道具。

如何将样式化组件（情感）中的 css 变量更改为从 React 道具获得的数据？

【问题讨论】：

标签： css reactjs css-grid styled-components emotion

【解决方案1】：

这是在他们的文档中： 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>
);

【讨论】：