导出一个通用的调色板，用于有样式的组件

Question

我们在应用程序中使用了样式组件。我们希望使用一个包含我们使用的所有颜色的通用样式文件。我有一个文件包含:

export const colors = {
black: '#000',
whiteTextBackground: 'rgba(0,0,0,.6)', // black at .7 background for white text of any size to pass wcag 2 AAA contrast standards. .6 only passes AA (good enough for now)
defaultFont: '#393A41',
border: '#B4B7C4',
divider: '#fafafa',
grey: '#6E7087',
grey1: '#d4d8e7',
grey2: '#CACBCD',
grey3: '#6E7078',
grey4: '#3c3e42',
greyLight: '#f9f9f9',
greyDisabled: '#e4e5e6',
offWhite: '#D4D8E7',
aluminium: '#E9E9E9',
checkBoxBackground: '#F2F2F2',
white: '#fff',
warmWhite: '#f5f2ed',
yellow: '#F9B738',
yellow2: '#B88D06',
notifRed: '#EF5848',
orange1: '#99332e',
orange: '#BF4136',
orange2: '#F69321',
orange3: '#D6801D',
purple: '#6159A4',
purple2: '#887DE5',
blue: '#00BADE',
blueContrast: '#037ea2',
stress5: '#0099B6',
blue5: '#85D6E5',
darkCyan: '#006b7f',
green: '#44BB8C',
green2: '#297f5e',
green3: '#389A73',
brown: '#70430F',
}

如何导入这些颜色以在样式组件中使用，例如:

const Headstyles = styled.div` 
color: <imported color here>;
display: flex; 
width: 100%;
margin: 2em; 
<etc etc> 
`

Answer 1

我想你要找的是<ThemeProvider>:

https://styled-components.com/docs/advanced

export const theme = {
black: '#000',
defaultFont: '#393A41',
border: '#B4B7C4',
divider: '#fafafa',
grey: '#6E7087',
grey1: '#d4d8e7',
}

然后你用ThemeProvider包裹你的组件Headstyles，这让你的组件访问主题变量，像这样:

const Headstyles = styled.div`
color: $(props => props.theme.grey}
`;
return (
<ThemeProvider theme={theme}>
<Headstyles />
<ThemeProvider />
);

或者，您可以直接定义&导出变量，然后导入它们:

import * as colors from './Colors.js'

，并像这样使用:

const HeadStyles = styled.div`
color: ${colors.grey};
`