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

Posted 2023-02-22

技术标签:

【中文标题】如何从祖先覆盖嵌套 Material UI 组件的样式？【英文标题】：How to override style of nested Material UI component from the ancestors? 【发布时间】：2020-06-15 17:32:31 【问题描述】：

我正在使用来自外部库的组件，该组件不允许我更改其大部分样式，但我想更改作为材质 ui 按钮的按钮的样式，在检查元素时它清楚地显示类 MuiButtonBase-root MuiIconButton-root MuiIconButton-colorInherit

例如，如何覆盖 MuiIconButton-root 样式？这是我的组件：

class MyComponent extends Component 

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

    



export default withStyles(styles)(MyComponent)

我尝试如下声明我的样式函数，但没有成功：

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

有人可以帮助我吗？提前致谢。

【问题讨论】：

Material-UI 样式文档：material-ui.com/styles/basics @keikai 我已经浏览了该文档，但找不到如何覆盖“孙子” 【参考方案1】：

假设为myComponent 生成的类名是myComponent-jss123。您在样式中使用的选择器 (&.MuiIconButton-root) 将等效于 .myComponent-jss123.MuiIconButton-root，它将匹配应用了 both 的任何元素。我相信您的意图是匹配您正在应用 myComponent 类的 div 的后代的图标按钮。在这种情况下，您需要使用由空格表示的descendant combinator，因此适当的样式如下所示：

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

这是一个完整的工作示例：

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>
  );