How to style material-ui select component with style-components (not material-ui classes!) in react?-CodePudding

I am struggling with styling my material-ui select component with styled-components, instead of material- classes. I am using material-ui/core 4.12.3.

If i use for example old makeStyles component from material and create my own classes it works just fine, as well as for example styling inline or via menuProps.

Works

  const useStyles = makeStyles((theme) => ({
    icon: {
      top: 0,
      marginRight: '1px',
    },
    selectRoot: {
      '&:focus': {
        backgroundColor: 'white',
        borderRadius: '10px',
      },
    },
  }))

Works

          <StyledSelect>
          classes={
            {
              //icon: classes.icon,
              //root: classes.selectRoot,
            }
          }

      MenuProps={{
        anchorOrigin: {
          vertical: 'bottom',
          horizontal: 'left',
        },

        getContentAnchorEl: null,
        style: {
          maxHeight: 400,
        },
      }}
                  style={{
                    border: '1px solid grey',
                    backgroundColor: 'white',
                    borderRadius: '10px',
                    width: '140px',
                    height: '40px',
                  }}
</StyledSelect>

But for the project integrity and restriction i prefer to style with style-components.

So far, i only managed to change letters color. Nothing else really works, even if i try to style it with use of classess names appeared in dev tools.

DOES NOT WORKS (sadly)

  StyledSelect: styled(Select)`
  border: '1px solid grey';
  backgroundColor: white;
  borderRadius: '10px';
  width: '140px';
  height: '40px'

  '&:focus': {
    backgroundColor: 'white';
    background-color: 'white';
    borderRadius: '10px',
  };
  .MuiSelect-select:focus {
    backgroundColor: 'white';
    background-color: 'white';
    borderRadius: '10px',
  },
    &.MuiSelect-select:focus {
      backgroundColor: 'white',
      background-color: 'white',
      borderRadius: '10px',
    },
    & .MuiInputBase-formControl {
      border-color: red;
    }
    icon: {
      top: 0,
      marginRight: '1px',
    },

Material documention does not really that helpfull in this case. Any ideas ?

CodePudding user response：

It isn't doing much since Material UI components are not simple HTML elements. For example, if you look in the HTML tree in dev tools, a "Select" is rendered not as a <select>...</select> but rather as...

<div>
  <label />
  <div>
    <div />
    <input />
    <svg>
      <path />
    </svg>
    <fieldset>
      <legend>
        <span />
      </legend>
    </fieldset>
  </div>
</div>

The styles are nested at various levels of the above component tree, so to modify a particular border or background style, you will have to know exactly which element to target using a specific selector (since the id properties change on every render).

Instead, you can continue to use the css properties provided in the material documentation, but do not attempt to replace the Material UI root component by defining it as a styled component. If you wrap the Material Select component in another div of your own, made with styled-components, then you can pass down those attributes to the children Material elements similar to how you are doing now.

Some attributes will need a "!important" flag to override the style in Material, and some will require you to use the somethingProps (e.g. "menuProps", "inputProps", etc.) properties in order to override the style. This is because while overriding it manually with the class name from the docs and a "!important" flag is very good at targeting one (or a couple) of the components in the tree, when you use the somethingProps properties, Material will automatically cascade those styles to the right elements in the tree.