如何在Styled Component中借助Theme为指定类型元素设置样式

• 首先确认你已经导入ThemeProvider组件并包裹了全量应用组件树，同时将自定义的theme对象传入ThemeProvider的theme属性，示例代码：

import { ThemeProvider } from 'styled-components';
import { theme } from './你的theme文件路径';

// 根节点渲染示例
ReactDOM.createRoot(document.querySelector('#root')).render(
  <ThemeProvider theme={theme}>
    {/* 你的应用根组件必须放在ThemeProvider内部，子组件才能拿到注入的theme */}
    <App />
  </ThemeProvider>
);

• 其次确认你定义的styled按钮组件正确读取了theme属性，必须在样式模板字符串内通过函数的形式调用props里的theme，不能直接引用，正确写法：

import styled from 'styled-components';

const Button = styled.button`
  /* 必须通过props.theme访问你定义的主题字段 */
  background: ${props => props.theme.button.background};
  color: #fff;
  border: none;
  padding: 8px 12px;
  border-radius: 4px;
`;

• 如果以上配置均正确仍然不生效，可排查依赖是否存在多版本styled-components冲突，删除项目内的node_modules文件夹、package-lock.json或yarn.lock文件后重新执行安装依赖命令即可。

内容的提问来源于stack exchange，提问作者Jamie Hutber