Как переопределить стиль вложенного компонента Material UI от предков? - PullRequest
Новая
       17

Как переопределить стиль вложенного компонента Material UI от предков?

1 голос
/ 03 марта 2020

Я использую компонент из внешней библиотеки, который не позволяет мне сильно изменять его стиль, но я хотел бы изменить стиль кнопки, которая является кнопкой пользовательского интерфейса материала, при проверке элемента он четко показывает классы 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"
    }
  }
});

Кто-нибудь может мне помочь? Заранее спасибо.

1 Ответ

1 голос
/ 03 марта 2020

Скажем, имя класса, сгенерированное для myComponent, равно myComponent-jss123. Селектор, который вы использовали в своих стилях (&.MuiIconButton-root), будет эквивалентен .myComponent-jss123.MuiIconButton-root, который будет соответствовать любому элементу, к которому применены оба этих классов. Я полагаю, что ваша цель состояла в том, чтобы соответствовать кнопкам значков, которые являются потомками того div, к которому вы применяете класс myComponent. В этом случае вам нужно использовать наследующий комбинатор , представленный пробелом, поэтому соответствующие стили будут выглядеть следующим образом: 

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

Edit target descendant icon button

Сопутствующая документация:

...