如何解决React和AntD-较少的样式不适用于Drawer组件中的类
我正在使用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 举报,一经查实,本站将立刻删除。