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

如果我对您的理解正确，那应该是您要寻找的。导入colors常量，然后在Button

中按如下方式使用它

import styled from 'styled-components';
import colors from './config/colors.jsx' //or where your file is located

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

export default Button;

Answer 2

不能完全确定文件夹的结构，而是要在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;

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

Answer 3

首先，您不需要将颜色文件用作jsx，将其重命名为colors.js并将其导入到您的组件中：

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

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

export default Button;

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

3 个答案: