Question

150

How to override style of nested Material UI component from the ancestors?

rated 0 times [ 154] [ 4] / answers: 1 / hits: 12841 / 4 Years ago, tue, march 3, 2020, 12:00:00

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.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

latrelllloydb

Add To Favorites

Follow

Total Points: 449

Total Questions: 92

Total Answers: 100

Location: French Polynesia

Member since Tue, Jul 7, 2020

4 Years ago

latrelllloydb questions

1 React Table isLoading property

Fri, Jul 10, 20, 00:00, 4 Years ago

1 A very big sum - Hacker Rank

Fri, May 29, 20, 00:00, 4 Years ago

1 How can I insert request body into a MySQL database using express js?

Mon, Sep 16, 19, 00:00, 5 Years ago

1 How to fill bootstrap table via bootstrapTable()?

Mon, Jun 17, 19, 00:00, 5 Years ago

1 Is there a way to both destructure a function parameter, and keep a named reference to the parameter?

Wed, May 29, 19, 00:00, 5 Years ago

View All

answered 4 Years ago darrell · Accepted Answer

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>

  );

}