样式化组件：全局颜色样式 Sheet

Question

我在我的应用程序中使用样式组件。我想制作一个全局样式 sheet 来保存我所有的颜色变量。 API 文档推荐这样的东西

import { createGlobalStyle } from 'styled-components'

const GlobalStyle = createGlobalStyle`
  body {
    color: ${props => (props.whiteColor ? 'white' : 'black')};
  }
`

但我有一个这样的颜色列表

export const COLORS = {
  navy: "#2F374B",
  green: "#1EB88D",
  white: "#FFFFFF",
  grey: "#222A3E",
  primary5: "#F4FBF9",
  danger: "#F13F4A",
};

而且我认为正文字段不能接受 'colors' 或颜色列表作为键。有什么设置建议吗？

提前致谢

Answer 1

查看 https://styled-components.com/docs/advanced#theming

您可以使用主题提供程序并在那里传递可重用的属性。

import { ThemeProvider } from 'styled-components'
import { COLORS } from './wherever'
const theme = {
  colors: COLORS
}

function App() {
  return <ThemeProvider theme={theme}><MainAppCode /></ThemeProvider>
}

设置组件样式时，您可以将主题对象作为道具访问：

const Button = styled.button`
  /* Color the border and text with theme */
  color: ${props => props.theme.colors.green};
`;

在带样式的组件模板字符串中传递函数的任何地方，您获得的参数都是 props，其中包含您的主题对象。

样式化组件：全局颜色样式 Sheet

Styled Components: Global Colors Style Sheet

javascript

css

reactjs

styled-components

styling