Customizing Components

Customizing Components

There are two main ways to Customize Components in Material-UI:

• Using Styles
  • The CSS/SASS way
  • The JS Component Way
• Using Theming

Using Styles to Customize Components

Material-UI can be used with a blend of CSS and javascript styling, In general for I would follow these rules of thumb:

• If its a one off changes use CSS/SASS
• If its a style that will be used multiple places (in different components) use javascript

There are some components in material that don't support CSS/SASS styling intuitively and therefore you are forced to use javascript

CSS Way

Lets use a the Button Comp as an example:

We want a square button with an icon and text centered in a column layout:

<Button
  className={styles.customButton}
>
  <FontAwesomeIcon icon={faPerson} />
  Add Person
</Button>

Our Sass would look like this:

.customButton {
    height: 100px;
    width: 100px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

Disclaimer about Material-UI: some components have lots of nested elements in that case take advantage of CSS specificity with sass to apply styles like this:

.customComp {
    div {
      a {
        color: black;
      }
    }
  }

JS Way

Customizing Material UI components with JS is not a very accurate description, because what your actually doing is creating a new component with new base styles.

We will use a Tooltip as an example as it very hard to style with CSS so you will want to use JS.

If you look at the Tooltip Docs page you will see the background of the tooltip defaults to black, we want to change that to white.

import { Tooltip } from '@material-ui/core';
// withStyles allows us to set new styles to tooltip component
import { withStyles } from '@material-ui/core/styles';
// Create our new tooltip component with styles
const LightTooltip = withStyles(() => ({
  tooltip: {
    backgroundColor: 'white',
    color: 'black',
  },
}))(Tooltip);
const component = () => (
  // use our new LightTooltip Component instead of the orignal one
  <LightTooltip
    title="I am a light tooltip"
    placement="left"
  >
    <Button>
      Button with tooltip
    </Button>
  </LightTooltip>
)

Theming Components

Material-UI Customizing Components Docs

Material-UI uses a javascript object to configure its theme for all things including the base styles to use for components like this:

export const resourceTheme = createMuiTheme({
  overrides: {
    MuiButton: {
      root: {
        borderRadius: '22px',
        padding: '5px 15px',
      },
    },
  }
}

Step by Step walkthrough of theming a components

1. To find out how which keys to use to edit a given component such as a Button, you have to visit the Button API page, and look at the default class name under the CSS section.
2. In the case of a <Button /> component the root class is: MuiButton
3. Then we have to decide what part of button to edit, in this case we can edit the root container

All Material UI Components have the root container and that is what you will edit most

export const resourceTheme = createMuiTheme({
  // All component base style changes go under overrides
  overrides: {
    // The base class we found in step two on the Button API Page
    MuiButton: {
      // The part of the button we want to edit in this case the root container
      root: {
        borderRadius: '22px',
        padding: '5px 15px',
      },
    },
  }
}

This will result in all <Button /> governed by this theme now having border-radius: 22px & padding: 5px 15px