styled-components不能覆盖antd组件样式?

import styled from 'styled-components';
import {Button} from 'antd';
const Btn = styled(Button)`
  background: red;
`;

问题: 用styled-components包裹antd组件,样式没有被覆盖?查看head中,styled的样式在antd样式前面?

    其实是一个webpack加载css过程的问题,原因是在你当前代码加载之前,已经使用过styled-components,但是没有引用antd,导致styled-components的动态样式<script>已经插入到<head>中,而antd的样式还没有加载,这样导致你在后面使用styled包裹antd样式时,antd的样式才会插入<head>,但是你的styled-component包裹的样式只会插入到之前定义好的<script>,优先级就会比antd的样式低。
     这是webpack的开发环境对css的处理顺序导致的,但是在生产环境不会有,因为antd样式加载会变成静态已经打包好的css文件,而styled-components仍然是动态的。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容