在 wordpress 插件中使用 material-ui 进行反应：css 特异性问题

问题描述

我正在尝试正确使用 material-ui 在 wordpress 插件中进行反应。 使用表单输入时会出现问题，并且样式会被 forms.css 文件中的 wordpress 自己的样式覆盖。

我正在努力寻找一种比forms.css具有更好特异性的material-ui编写css的解决方案，而不必重写样式（我不会为material-ui组件使用自己的自定义样式：我想使用默认的样式)

这是一个示例（文本已被编辑以提高可读性（删除了无关紧要的选择器和样式）：

响应jsx：

<div id='ad-campaign-edit' style={modalStyle} className={classes.root}>
            <form
                className={classes.form}
                novalidate
                autoComplete='off'
            >
                <TextField
                    id='ad-campaign-name'
                    className={classes.textField}
                    variant='filled'
                    label='Navn på kampanjen'
                />
                <TextField
                    id='ad-campaign-sub-title-text'
                    className={classes.textField}
                    variant='filled'
                    label='Undertekst'
                />
                <TextField
                    id='ad-campaign-sub-price'
                    className={classes.textField}
                    variant='filled'
                    label='Pris'
                />
                <CheckBox
                    defaultChecked
                    className={classes.textField}
                    color='primary'
                    inputProps={{ 'aria-label': 'secondary checkBox' }}
                />
            </form>
        </div>

forms.css(WP):

input[type="text"],{
   ...
}

从 material-ui 生成的 css：

.MuiInputBase-input {
   ...
}

其他需要注意的事情：material-ui 中的 css 是在 dom 中的 wordpress 样式 之后生成的。 查看css specificity(ref www.specifishity.com)的规则，forms.css是(0-1-1)，material-ui是(0-1-0)。

我的问题是：如何让 material-ui 优先 不必用 makeStyles 钩子之类的东西重写所有 css？（我可以为 material-ui 添加更好的特异性吗？ )

编辑：忘记添加 html/jsx edit2：重写特异性理解。

解决方法

我解决了它，它可以工作但不完全。 这个解决方案可以作为一个起点。

你需要安装这个 npm https://www.npmjs.com/package/jss-increase-specificity

然后你必须创建一个像这里描述的 https://material-ui.com/styles/advanced/#jss-plugins

我做了什么

import { create } from 'jss';
import { StylesProvider,jssPreset } from '@material-ui/core/styles';
import increaseSpecificity from 'jss-increase-specificity';


const jss = create({
    plugins: [...jssPreset().plugins,increaseSpecificity({ repeat: 1 })],});

export default function App() {
  return (
    <StylesProvider jss={jss}>
      ...
    </StylesProvider>
  );
}