时间戳

首页 > 解决方案 > 创建反应应用程序：重新排序样式标签，以便 css 的顺序正确

reactjs - 创建反应应用程序：重新排序样式标签，以便 css 的顺序正确

问题描述

我create react app用来构建我的 Web 应用程序并使用ant design组件。我styled-components用来进一步自定义样式。现在一切都很好。

但是，当我尝试在此之后更改原色时，我注意到我的 css 规则（从styled-components）被新编译的规则（从更少，antd更改原色的默认样式）覆盖。

当我打开开发者控制台时，编译后的 css 位于最后一个位置。当我在开发人员控制台中向上拖动并重新排序样式标签时，它会为我提供正确的显示。如何配置使antdcss在styled-components一个之前？

这是我的config-overrides.js

const { override, fixBabelImports, addLessLoader } = require('customize-cra');

module.exports = override(
  fixBabelImports('import', {
    libraryName: 'antd',
    libraryDirectory: 'es',
    style: true,
  }),
  addLessLoader({
    javascriptEnabled: true,
    modifyVars: { '@primary-color': '#333' },
  }),
);

标签： reactjscreate-react-appantdstyled-components

解决方案

推荐阅读