时间戳

首页 > 解决方案 > 如何将颜色从 colors.jsx 导入到另一个文件

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

问题描述

我有一个 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;

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

标签： cssreactjs

解决方案

不完全确定您的文件夹结构，但在 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;

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

推荐阅读