如何在styled-components中导入并使用公共颜色配置文件

• 第一步：先将你写的颜色导出代码保存为独立的样式文件，比如命名为colors.js，存放在你项目的公共样式目录下，例如src/styles/colors.js
• 第二步：在你编写styled-components组件的文件顶部，导入colors对象，路径替换为你项目中对应文件的实际路径即可：

// 示例相对路径，按你自己的项目结构调整
import { colors } from './styles/colors'
// 如果配置了路径别名也可以写别名路径
// import { colors } from '@/styles/colors'

• 第三步：在styled的模板字符串中，使用${}插值语法引用对应颜色值即可，示例如下：

const Headstyles = styled.div` 
 color: ${colors.defaultFont};
 display: flex; 
 width: 100%;
 margin: 2em; 
 /* 其余自定义样式 */
`

如果不想每次使用颜色都手动导入colors，也可以用styled-components自带的ThemeProvider全局注入颜色变量，所有子组件都可以直接通过props.theme访问颜色，不需要单独导入：

1. 在项目根组件里配置ThemeProvider：

import { ThemeProvider } from 'styled-components'
import { colors } from './styles/colors'

// 也可以把其他全局主题变量都放到theme对象里统一维护
const theme = {
  colors
}

function App() {
  return (
    <ThemeProvider theme={theme}>
      {/* 你的项目原有代码 */}
    </ThemeProvider>
  )
}

2. 之后在任意styled组件中都可以直接读取主题颜色：

const Headstyles = styled.div` 
 color: ${props => props.theme.colors.defaultFont};
`

内容的提问来源于stack exchange，提问作者Demian Sims