Question

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

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

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

有人可以帮助我吗？预先感谢。

Answer 1

比方说，为myComponent生成的类名称为myComponent-jss123。您在样式（&.MuiIconButton-root）中使用的选择器将与.myComponent-jss123.MuiIconButton-root等效，该选择器将匹配具有以下两个类别的所有元素的元素。我相信您的意图是匹配应用div类的myComponent的后代的图标按钮。在这种情况下，您需要使用由空格表示的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>
  );
}

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

1 个答案: