如何从祖先覆盖嵌套的Material UI组件的样式?

问题描述

我正在使用一个来自外部库的组件，该组件不允许我对其样式进行很多更改，但是我想更改作为材质ui按钮的按钮的样式，当检查该元素时它会清楚地显示出类 MuiButtonBase根MuiIconButton根MuiIconButton-colorInherit

例如，如何覆盖MuiIconButton根样式?这是我的组件:

  class MyComponent扩展了Component {使成为() {const {classes} = this.props;返回 (< div className = {classes.myComponent}>< 3rdPartyComponent/></div>);}}导出默认withStyles(styles)(MyComponent) 

我尝试如下声明样式功能，但没有成功:

  const styles = theme =>({myComponent:{& .MuiIconButton-root":{填充:"0px"}}}); 

有人可以帮助我吗?预先感谢.

解决方案

假设为 myComponent 生成的类名称为 myComponent-jss123 .您在样式(&..MuiIconButton-root )中使用的选择器将等效于 .myComponent-jss123.MuiIconButton-root ，该匹配器将匹配具有这些类中的两个都适用于它.我相信您的意图是匹配应用 myComponent 类的 div 的后代的图标按钮.在这种情况下，您需要使用

相关文档:

• https://cssinjs.org/jss-plugin-nested/?v=v10.0.4#use--to-reference-selector-of-the-parent-rule
• https://developer.mozilla.org/zh-CN/docs/Web/CSS/Class_selectors
• https://developer.mozilla.org/zh-CN/docs/Web/CSS/Descendant_combinator

I am using a component from an external library that does not allow me to change much of its style, but I would like to change the style of a button that is a material ui button, when inspecting the element it clearly shows the classes MuiButtonBase-root MuiIconButton-root MuiIconButton-colorInherit

how can I override the MuiIconButton-root style, for instance? this is my component:

class MyComponent extends Component {

    render() {
        const { classes } = this.props;
        return (
            <div className={classes.myComponent}>
                <3rdPartyComponent />
            </div>
        );

    }
}


export default withStyles(styles)(MyComponent)

I have tried declaring my styles function as follows, without success:

const styles = theme => ({
  myComponent: {
    "&.MuiIconButton-root": {
      padding: "0px"
    }
  }
});

Can anybody help me? Thanks in advance.

解决方案

Let's say that the class name generated for myComponent is myComponent-jss123. The selector you used in your styles (&.MuiIconButton-root) would be equivalent to .myComponent-jss123.MuiIconButton-root which would match any element that has both of these classes applied to it. I believe your intent was to match icon buttons which are descendants of the div on which you are applying the myComponent class. In this case you need to use the descendant combinator represented by a space, so the appropriate styles would look like the following:

const styles = theme => ({
  myComponent: {
    "& .MuiIconButton-root": {
      padding: 0
    }
  }
});

Here's a full working example:

import React from "react";
import IconButton from "@material-ui/core/IconButton";
import DeleteIcon from "@material-ui/icons/Delete";
import { makeStyles } from "@material-ui/core/styles";

const useStyles = makeStyles({
  myComponent: {
    "& .MuiIconButton-root": {
      padding: 0
    }
  }
});
const ThirdPartyComponent = () => {
  return (
    <div>
      I'm a third party component that contains an IconButton:
      <IconButton color="primary">
        <DeleteIcon />
      </IconButton>
    </div>
  );
};
export default function App() {
  const classes = useStyles();
  return (
    <div className={classes.myComponent}>
      <ThirdPartyComponent />
    </div>
  );
}

Related documentation:

• https://cssinjs.org/jss-plugin-nested/?v=v10.0.4#use--to-reference-selector-of-the-parent-rule
• https://developer.mozilla.org/en-US/docs/Web/CSS/Class_selectors
• https://developer.mozilla.org/en-US/docs/Web/CSS/Descendant_combinator

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