material-uibackstage

Material-UI Theme Overrides for `withStyles` in Backstage?

How can I override the theming of a component in Material-UI that has styles applied to it through withStyles?

When I look at the component in question I see the following in the DOM:

I'm attempting to restyle Backstage and am looking at the MuiSelect component right now. Backstage has adjusted the styling of the MuiSelect by overriding CSS with withStyles. Looking at the DOM I am trying to adjust CSS that is being applied through the WithStyles(ForwardRef(InputBase))-input-75764 class.

enter image description here

In Backstage's Select.tsx component file, the styles are defined this way:

const BootstrapInput = withStyles((theme: Theme) =>
  createStyles({
    root: {
      'label + &': {
        marginTop: theme.spacing(3),
      },
    },
    input: {
      borderRadius: 4,
      position: 'relative',
      backgroundColor: theme.palette.background.paper,
      border: '1px solid #ced4da',
      fontSize: 16,
      padding: '10px 26px 10px 12px',
      transition: theme.transitions.create(['border-color', 'box-shadow']),
      fontFamily: 'Helvetica Neue',
      '&:focus': {
        background: theme.palette.background.paper,
        borderRadius: 4,
      },
    },
  }),
)(InputBase);

How, using Material-UIs createTheme can I target these styles?

Solution

  • There's a guide here on how to override styles for named Backstage components.

    For Backstage components that don't have override names available, they can be added such as in this pull request.