theme.js – 我有一个Styled-Components主题,其中包含我所有应用程序的颜色变化.
const colors = {
purples: {
60: '#AEA',50: '#GSA',},blues: {
20: '#asd',5: '#fasd',}
...
然后我有一个UI组件,我需要按特定顺序定义颜色数组：
import React from 'react';
const colors = ['#GSA','#AEA','#asd','#fasd','#AEA'];
我后来使用这个颜色数组来找到基于状态在我的组件中使用的正确颜色：
const getBackgroundColor = ({ currentPosition }) => {
const color = colors[(currentPosition) % colors.length];
return color;
};
这个函数在我的样式组件中使用,如下所示：
const StyledCard = styled.div`
background: ${getBackgroundColor};
...
`;
问题是我的颜色数组是在没有样式组件主题的情况下设置的.
当它在样式元素之外时,如何使用我的主题定义常量颜色？
最佳答案
所以我用react-native做了这个,应该非常相似.我有一个名为colors.js的文件,其中包含所有颜色,然后我将它们作为对象导入,这样我就可以说颜色[TheNameOfTheColorIWant]
colors.js
export const fadedPurple = '#9f91ad';
export const success = '#4fa579';
export const failure = '#ca374d';
按钮组件
import * as colors from '../../../assets/styles/colors';
const Button = (props) => {
const {
onPress,children,color
} = props;
style = {
backgroundColor: colors[backgroundColor]
}
return (
