React Material UI - Override using withStyles

Question

I am working on a project and leverage React Material UI and need to override the Select component's border bottom color on the focused state. Here is what I'm using right now

import { Select as MuiSelect, withStyles } from '@material-ui/core';
import { BRAND_COLORS } from '../../constants/colors';

const FONT_SIZE = 20;

const Select = withStyles({
  root: {
    fontSize: FONT_SIZE,
    '&:focus': {
      backgroundColor: 'transparent',
    },
    '& .MuiInput-underline:after': {
      borderBottomColor: BRAND_COLORS.blue,
    },
  },
})(MuiSelect);

export default Select;

<Select
  native
  startAdornment={<InputAdornment position="start"><FilterListIcon /></InputAdornment>}
  value={service.regionalFocus}
  onChange={(event) => this.props.changeSelectedRegionalFocus({
      providerId, serviceId: service.service_id, regionalFocus: 
event.target.value})
      }
    >
      {regionalFocus.map((region, index) => service.service_regions[region.value].length ? (
        <option key={index} value={region.value}>
          {region.label}
        </option>
      ) : null)}
    </Select>

I'm able to override the font size, however, the borderBottomColor is not registering. Any thoughts?

The select component mounts an input inside it. Can you please provide how are you actually rendering the select ? — Incepter, Apr 03 '20 at 16:22
I just looked at what is being mounted and there isn't an input. This just renders a select with the options included. — JamesHandshoe, Apr 03 '20 at 16:27
an mui input actually. please provide how are you using the select — Incepter, Apr 03 '20 at 16:28

sdotson · Answer 1 · 2020-04-03T17:37:29.677

0

It looks like you are trying to style the Input that is a child of Select. To override Input props, including styling, you'll need to pass them as an override in the inputProps prop on Select.

Something like:

const MySelect = (props) => {
  return (
    <Select {...props} inputProps={{ classes: { underline: props.classes.inputOverride } }}
  );
};

export default withStyles({
  root: {
    fontSize: FONT_SIZE,
    '&:focus': {
      backgroundColor: 'transparent',
    }
  },
  inputOverride: {
    '&:after': {
      borderBottomColor: BRAND_COLORS.blue,
    }
  }
})(MySelect);

The docs for Select and Input will help you here: https://material-ui.com/api/select/ https://material-ui.com/api/input/

As well as the source code to really understand how it all works: https://github.com/mui-org/material-ui/blob/d956b40539d7b724ca6026aeae96e1f42dd22331/packages/material-ui/src/Select/Select.js#L230

edited Apr 03 '20 at 17:37

answered Apr 03 '20 at 16:34

sdotson

790
3
13

I gave this a shot and it didn't actually override. – JamesHandshoe Apr 03 '20 at 16:54
thanks for bringing that to my attention. I think my syntax wasn't quite right I think. `withStyles` adds a `classes` prop to the component which you can then use to override things. Does this get you closer? – sdotson Apr 03 '20 at 17:05
Still not getting it to override the .MuiInput-underline:after css – JamesHandshoe Apr 03 '20 at 17:29
I ended up fixing this by overriding it in my common styles by targeting the class and adding !important. Not ideal however - I'd love to fix this with withStyles api – JamesHandshoe Apr 03 '20 at 17:36

React Material UI - Override using withStyles

1 Answers1