css - 如何将颜色从 colors.jsx 导入到另一个文件

Question

我有一个包含以下代码的 src/config/colors.jsx 文件:

const colors = {
    pink: '#f1316b',
}

export default colors;

我还有另一个 Button.jsx 文件如下

import styled from 'styled-components';

const Button = styled.button`
  width: 100px;
  height: 48px;
  border-radius: 24px;
  background-color: #f1316b;
  color: #fff;
  border: 0;
`;

export default Button;

如何从颜色中导入粉红色以用作按钮中的背景色？

Answer 1

不完全确定您的文件夹结构，但在 Button 组件内部(假设它也在 src 文件夹中)，就这样做

import styled from 'styled-components';
import colors from './config/colors.jsx';

const Button = styled.button`
  width: 100px;
  height: 48px;
  border-radius: 24px;
  background-color: colors.pink;
  color: #fff;
  border: 0;
`;

export default Button;

你还可以添加其他你想要的颜色