React和AntD-较少的样式不适用于Drawer组件中的类

编程问答 2022-06-08

问题描述

我正在使用Ant Design构建一个React App。我根据主题指南使用较少的配置和文件修改了主题颜色，一切正常。

我有一个文件Login.js，我使用类选择器在同一文件夹的Login.less中应用样式。有用。正常的东西。

问题是，当我在代码中添加一个Drawer时，无法使用less文件设置该抽屉或其子组件的样式。尝试了各种选择器和特殊性，但我什至看不到我在浏览器检查器中分配的类。就像更少的时候完全忽略它们一样。

这就是我在Login.js中添加抽屉的方式：

import './Login.less';

<div className={'loginContainer'}>
    ... Login form and other stuff,all working here...
    <Drawer
        className={'mydrawer'}
        // style={{ color: "#fff3" }}
        title="Completar datos de la cuenta"
        width={window.innerWidth > 900 ? "70%" : window.innerWidth}
        onClose={() => {setVisible(false)}}
        visible={visible}
        bodyStyle={{ paddingBottom: 80 }}
        footer={ ...footer code... }
    >
        <p>some text to try css</p>
    </Drawer>
</div>

和Login.less文件：

@import '~antd/dist/antd.less';

.loginContainer {
  height: 100vh;
  display: flex;

  //... Styles for the login page,all working ...

}

.mydrawer{
  color: #fff !important;
}

在mydrawer类上方的代码中，logincontainer的范围之外，但这只是我最后尝试的方法，应该放在里面。

如果我添加内联样式，则上述类的颜色规则将被完全忽略，但是我需要减少文件工作量！

我没有在此处添加webpack配置，因为我认为这是可行的，因为样式已应用到其他地方（包括项目中的其他视图）。

我尽了最大的努力来复制此代码，但是使用CSS在代码沙箱中可以复制样式，

编辑：

如果我添加<p className={'somep'}> a simple test </p>，则可以使用less文件修改样式，但是如果将<p>元素放在抽屉中，它将停止采用样式。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

antdantdantdcracolessreactjsreactjsreactjsreactjs