Material UI,如何覆盖嵌套MUI组件的样式?
MaterialUI, how to overwrite styles of nested MUI component?
我正在使用 react-admin and I am using their Create
组件,该组件使用 @material-ui/core
中的 TextField
。
当然我已经阅读了文档here。
我想为自定义视图完全自定义渲染,这是生成的样子 html:
<div class="create-page Component-root-55" notification="">
<div class="MuiPaper-root-58 MuiPaper-elevation1-61 MuiPaper-rounded-59 MuiCard-root-57 Component-card-56 Create-card-53">
<form class="simple-form" locale="en">
<div class="MuiCardContent-root-86 CardContentInner-root-85">
<div class="ra-input ra-input-email">
<div class="MuiFormControl-root-11 MuiFormControl-marginNormal-12 MuiFormControl-fullWidth-14" locale="en">
<label class="MuiFormLabel-root-20 MuiInputLabel-root-15 MuiInputLabel-formControl-16 MuiInputLabel-animated-19" data-shrink="false" for="email"><span>Email *</span></label>
<div class="MuiInput-root-27 MuiInput-fullWidth-34 MuiInput-formControl-28 MuiInput-underline-31"><input aria-invalid="false" class="MuiInput-input-35 MuiInput-inputType-38 withRouter-Connect-SubscribeNewsletterForm---inputType-52" id="email" name="email" type="email" value=""></div>
</div>
</div>
</div>
<div class="MuiToolbar-root-97 MuiToolbar-regular-99 MuiToolbar-gutters-98 Toolbar-toolbar-92 Toolbar-desktopToolbar-93" role="toolbar">
<div class="Toolbar-defaultToolbar-95">
<button tabindex="0" class="MuiButtonBase-root-129 MuiButton-root-103 MuiButton-contained-114 MuiButton-containedPrimary-115 MuiButton-raised-117 MuiButton-raisedPrimary-118 SaveButton-button-101" type="submit">
<span class="MuiButton-label-104">
<svg class="MuiSvgIcon-root-132 SaveButton-iconPaddingStyle-102" focusable="false" viewBox="0 0 24 24" aria-hidden="true">
<g>
<path d="M17 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V7l-4-4zm-5 16c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3zm3-10H5V5h10v4z"></path>
</g>
</svg>
Save
</span>
<span class="MuiTouchRipple-root-139"></span>
</button>
</div>
</div>
<div class="Toolbar-spacer-96"></div>
</form>
</div>
</div>
我在 material-ui.
中只有一些覆盖样式的经验
由于 Create.js
中的解释,在成功找到如何将 boxShadow 删除到 card
之后,我正在努力寻找如何编辑创建中的内容。
比如我想去掉MuiToolbar
的背景,用MuiToolbar-regular-99
标识,我有这样的:
const createStyles = {
card: {
boxShadow: 'none',
borderRadius: 0,
},
toolbar: {
toolbar: {
backgroundColor: 'transparent',
},
},
};
const Create = withStyles(createStyles)(function Create({ classes, ...rest }) {
return (
<CreateDefault
classes={classes}
{...rest}
/>
);
});
我也试过:
const createStyles = {
card: {
boxShadow: 'none',
borderRadius: 0,
},
toolbar: {
backgroundColor: 'transparent',
},
};
const Create = withStyles(createStyles)(function Create({ classes, ...rest }) {
console.log(classes);
return (
<CreateDefault
classes={{
card: classes.card,
toolbar: classes.toolbar
}}
{...rest}
/>
);
});
这不会将任何 CSS 应用到工具栏,我不明白逻辑,发现 jss 太复杂了,我必须寻求帮助。
如何使用 Material UI 组件覆盖嵌套样式,即使使用包装许多的包装器也是如此?
编辑codesandbox
我能得到的最接近的也是:https://codesandbox.io/s/2uboj
默认情况下没有灰色工具栏,因为可能使用了 react-admin 版本,但你可以看到目标。
你没有沙盒,我看不到你在哪里使用 <TextField />
组件,所以我无法测试这是否有效,但我可以向你展示两个应该有帮助的选项你和 类.
要应用多个 类,您应该这样做:
className={[classes.card, classes.toolbar].join(' ')}
要访问 material 组件内的元素,您需要使用 material 文档中组件 API 下列出的 CSS API。 TextField
有点复杂,因为它结合了其他几个组件。您需要将 类 作为道具传递给每个组件。例如
<TextField InputProps={classes={classes}}
我正在使用 react-admin and I am using their Create
组件,该组件使用 @material-ui/core
中的 TextField
。
当然我已经阅读了文档here。
我想为自定义视图完全自定义渲染,这是生成的样子 html:
<div class="create-page Component-root-55" notification="">
<div class="MuiPaper-root-58 MuiPaper-elevation1-61 MuiPaper-rounded-59 MuiCard-root-57 Component-card-56 Create-card-53">
<form class="simple-form" locale="en">
<div class="MuiCardContent-root-86 CardContentInner-root-85">
<div class="ra-input ra-input-email">
<div class="MuiFormControl-root-11 MuiFormControl-marginNormal-12 MuiFormControl-fullWidth-14" locale="en">
<label class="MuiFormLabel-root-20 MuiInputLabel-root-15 MuiInputLabel-formControl-16 MuiInputLabel-animated-19" data-shrink="false" for="email"><span>Email *</span></label>
<div class="MuiInput-root-27 MuiInput-fullWidth-34 MuiInput-formControl-28 MuiInput-underline-31"><input aria-invalid="false" class="MuiInput-input-35 MuiInput-inputType-38 withRouter-Connect-SubscribeNewsletterForm---inputType-52" id="email" name="email" type="email" value=""></div>
</div>
</div>
</div>
<div class="MuiToolbar-root-97 MuiToolbar-regular-99 MuiToolbar-gutters-98 Toolbar-toolbar-92 Toolbar-desktopToolbar-93" role="toolbar">
<div class="Toolbar-defaultToolbar-95">
<button tabindex="0" class="MuiButtonBase-root-129 MuiButton-root-103 MuiButton-contained-114 MuiButton-containedPrimary-115 MuiButton-raised-117 MuiButton-raisedPrimary-118 SaveButton-button-101" type="submit">
<span class="MuiButton-label-104">
<svg class="MuiSvgIcon-root-132 SaveButton-iconPaddingStyle-102" focusable="false" viewBox="0 0 24 24" aria-hidden="true">
<g>
<path d="M17 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V7l-4-4zm-5 16c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3zm3-10H5V5h10v4z"></path>
</g>
</svg>
Save
</span>
<span class="MuiTouchRipple-root-139"></span>
</button>
</div>
</div>
<div class="Toolbar-spacer-96"></div>
</form>
</div>
</div>
我在 material-ui.
中只有一些覆盖样式的经验由于 Create.js
中的解释,在成功找到如何将 boxShadow 删除到 card
之后,我正在努力寻找如何编辑创建中的内容。
比如我想去掉MuiToolbar
的背景,用MuiToolbar-regular-99
标识,我有这样的:
const createStyles = {
card: {
boxShadow: 'none',
borderRadius: 0,
},
toolbar: {
toolbar: {
backgroundColor: 'transparent',
},
},
};
const Create = withStyles(createStyles)(function Create({ classes, ...rest }) {
return (
<CreateDefault
classes={classes}
{...rest}
/>
);
});
我也试过:
const createStyles = {
card: {
boxShadow: 'none',
borderRadius: 0,
},
toolbar: {
backgroundColor: 'transparent',
},
};
const Create = withStyles(createStyles)(function Create({ classes, ...rest }) {
console.log(classes);
return (
<CreateDefault
classes={{
card: classes.card,
toolbar: classes.toolbar
}}
{...rest}
/>
);
});
这不会将任何 CSS 应用到工具栏,我不明白逻辑,发现 jss 太复杂了,我必须寻求帮助。
如何使用 Material UI 组件覆盖嵌套样式,即使使用包装许多的包装器也是如此?
编辑codesandbox
我能得到的最接近的也是:https://codesandbox.io/s/2uboj
默认情况下没有灰色工具栏,因为可能使用了 react-admin 版本,但你可以看到目标。
你没有沙盒,我看不到你在哪里使用 <TextField />
组件,所以我无法测试这是否有效,但我可以向你展示两个应该有帮助的选项你和 类.
要应用多个 类,您应该这样做:
className={[classes.card, classes.toolbar].join(' ')}
要访问 material 组件内的元素,您需要使用 material 文档中组件 API 下列出的 CSS API。
TextField
有点复杂,因为它结合了其他几个组件。您需要将 类 作为道具传递给每个组件。例如<TextField InputProps={classes={classes}}