如何使用主题为样式组件中的某种元素设置样式

Question

如果 imo 缺少 styled-components 的 documentation

，我看不到一个好的正常示例

我的主题工作正常：

export const theme = {
  button: {
    background: '#000'
  }
}

但是该按钮没有应用任何样式。

Answer 1

您必须将您的主题作为道具传递到您的组件中，并使用它设置您的样式。

仅使用按钮键设置主题不会影响按钮本身。

主题基本上只是一个带有设置的 JSON 对象，这些设置通过主题提供程序作为道具传递给您的组件。

就像在您链接的文档中一样，您可以这样做：

// Define our button, but with the use of props.theme this time
const Button = styled.button`
  font-size: 1em;
  margin: 1em;
  padding: 0.25em 1em;
  border-radius: 3px;

  /* Color the border and text with theme.main */
  color: ${props => props.theme.main};
  border: 2px solid ${props => props.theme.main};
`;

然后根据从您的主题收到的道具设置按钮样式。