CODEWITHSUNDEEP
javascriptreactjsmaterial-ui
Madalinul
Madalinul

Reputation: 95

How to make custom components?

So bascially I want to change how the snackbar background, buttons and so on look. I am new to material UI and I don't know if I am on the right path and this is what i am trying.

const styles = {
    root: {
      background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)'
  };

const CustomSnackbar = props => <Snackbar {...props} />;

export default withStyles(styles)(CustomSnackbar);

The problem is I don't know how to change the child components styles because the background color is set in the child. This is the same for other components. Any help will be apreciated. Thanks

Upvotes: 3

Views: 67

Answers (2)

Juorder Gonzalez
Juorder Gonzalez

Reputation: 1652

You can override styles from Snackbar component, you can use this guide Snackbar API, so if you really want to change the button look and feels, as you can see your Snackbar allow you to pass a property called actions, so in there you should set your buttons already styled, please follow the demo for Snackbar components

Upvotes: 0

Nielsvandenbroeck
Nielsvandenbroeck

Reputation: 385

I could try to explain but I think it's easier to give you this link

just try adding classes={{ root: props.classes.root }} to your component

Upvotes: 1

Related Questions