1. 直接在js代码中强制修改style ,达到布局的要求
代码里面的style(style={{ paddingLeft: '15px', paddingRight: '15px' }})可以覆盖掉css中的styles.resetBtn
<Button
type="primary"
className={styles.resetBtn}
style={{ paddingLeft: '15px', paddingRight: '15px' }} //// 强制修改padding
onClick={() => { this.reset(); }}
>重置</Button>
2. 获取页面元素的id来修改页面的css
这里的global代表它是一个全局属性。
当你要修改单个页面中的css时,要加个名字把全局属性包一下,否则所有的页面都会被修改
.tableListForm {
:global {
.ant-form-item {
margin-bottom: 24px;
margin-right: 0;
display: flex;
> .ant-form-item-label {
width: auto;
line-height: 32px;
padding-right: 8px;
}
.ant-form-item-control {
line-height: 32px;
}
}
.ant-form-item-control-wrapper {
flex: 1;
}
}
.submitButtons {
white-space: nowrap;
margin-bottom: 24px;
}
}
以上就是两种简单强制修改页面元素属性的方法!