MaterialUI，如何覆盖嵌套MUI组件的样式? [英] MaterialUI, how to overwrite styles of nested MUI component?

问题描述

我正在使用反应管理员，并且我正在使用他们的

I am using react-admin and I am using their Create component that use TextField from @material-ui/core.

我当然已经在此处阅读了文档

Of course I have read the documentation here

我想为自定义视图完全自定义渲染，这就是生成的html的外观:

I would like to completely customize the render for a custom view, this is how look the generated 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中，我只有一些覆盖样式的经验.

I have just a few experience in overriding styles in material-ui.

由于Create.js中的解释，成功找到了如何将boxShadow删除到card后，我正在努力寻找如何编辑创建内容的方法.

After succeeding in finding how to remove the boxShadow to the card thanks to the explanation in the Create.js, I am struggling finding how to edit what is within the create.

例如，我想删除以MuiToolbar-regular-99标识的MuiToolbar的背景，这就是我拥有的:

For instance, I would like to remove the background of MuiToolbar, identified with MuiToolbar-regular-99, this is what I have :

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非常复杂，我必须寻求帮助.

This doesn't apply any css to the toolbar, I don't get the logic and found jss so complexe that I must ask for help.

有人能解释我如何使用材料ui组件覆盖嵌套样式，即使使用包装很多的包装器也是如此?

Can anybody explain me how I can override nested styles with material ui component, even if using a wrapper that wrap many?

编辑代码和框

我也能找到的最接近的东西: https://codesandbox.io/s/2uboj

The closest I could get too: https://codesandbox.io/s/2uboj

由于使用了适当的react-admin版本，默认情况下它没有灰色的工具栏，但是您可以看到目标.

It doesn't have by default the grey toolbar because of propably react-admin version used, but you can see the goal.

推荐答案

您没有沙盒，而且我看不到您正在使用<TextField />组件的位置，因此我无法测试它是否有效，但我可以向您展示两个可以帮助您上课的选项.

You don't have a sandbox and I can't see where you're using the <TextField /> component so I can't test if this works, but I can show you two options that should help you with classes.

1. 要应用多个课程，您应该这样做:

1. To apply multiple classes, you should do:

className={[classes.card, classes.toolbar].join(' ')}

要访问物料组件中的元素，您需要使用物料文档上组件API下列出的CSS API. TextField有点复杂，因为它结合了其他几个组件.您需要将类作为道具传递给每个组件.例如

To access the elements inside a material component, you need to use the CSS APIs listed under the component APIs on the material docs. TextField is a bit more complicated as it combines several other components. You need to pass your classes to each component as a prop. E.g.

<TextField InputProps={classes={classes}}

这篇关于MaterialUI，如何覆盖嵌套MUI组件的样式?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！