CODEWITHSUNDEEP
reactjsmaterial-ui
AlbertMunichMar
AlbertMunichMar

Reputation: 1896

How to change material UI select border and label

I am trying to change the border of a select component from Material-UI. So far I've tried:

const styles = theme => ({
  root: {
    display: "flex",
    flexWrap: "wrap",
    backgroundColor: "lightgrey"
  },
  formControl: {
    margin: theme.spacing.unit,
    minWidth: 120
  },
  selectEmpty: {
    marginTop: theme.spacing.unit * 2
  },
  cssLabel: {
    color: "pink",
    "&$cssFocused": {
      color: "pink"
    }
  },
  cssFocused: {
    color: "pink"
  },
  underline: {
    "&:after": {
      borderBottom: "1px solid pink",
      borderTop: "1px solid pink"
    }
  }
});

I can customise TextField etc., but after many many hours, I still can not customise the Select. I tried to pass also an Input, but then you have to customise the Input, which is even worse.

Could someone help me with this sandbox?

https://codesandbox.io/s/material-demo-ecj1k

I would really appreciate it.

Upvotes: 15

Views: 25942

Answers (5)

Katie
Katie

Reputation: 1

With MUI sx you can now add styling inline with the mui component.

The example code below changes the input label to red and the border to green when the select component is focused. The selected dropdown item background color is also set to pink.

<FormControl>
  <InputLabel 
    sx = {{'&.Mui-focused': { color: 'red'}}}
    id='label'> Your Label Here
  </InputLabel>
  <Select
    labelId='label'
    id='label'
    value={timeRange}
    onChange={handleChange}
    fullWidth
    label='Timeframe'

    sx = {{
      '&.Mui-focused .MuiOutlinedInput-notchedOutline': {
        borderColor: 'green'
      }
    }}
    
    MenuProps={{ sx: {
      '&& .Mui-selected': {backgroundColor: `pink`}
      }}}
   >

      <MenuItem value={1}>Option 1</MenuItem>
      <MenuItem value={2}>Option 2</MenuItem>
      <MenuItem value={7}>Option 3</MenuItem>

    </Select>
  </FormControl>

Upvotes: 0

Ryan Cogswell
Ryan Cogswell

Reputation: 81136

Below is an example of overriding the colors of the border (MuiOutlinedInput-notchedOutline), label (MuiInputLabel-root), and selected item text (MuiOutlinedInput-input) for default, hover, and focused states.

import React from "react";
import ReactDOM from "react-dom";

import TextField from "@material-ui/core/TextField";
import MenuItem from "@material-ui/core/MenuItem";
import { makeStyles } from "@material-ui/core/styles";

const useStyles = makeStyles({
  root: {
    width: 200,
    "& .MuiOutlinedInput-input": {
      color: "green"
    },
    "& .MuiInputLabel-root": {
      color: "green"
    },
    "& .MuiOutlinedInput-root .MuiOutlinedInput-notchedOutline": {
      borderColor: "green"
    },
    "&:hover .MuiOutlinedInput-input": {
      color: "red"
    },
    "&:hover .MuiInputLabel-root": {
      color: "red"
    },
    "&:hover .MuiOutlinedInput-root .MuiOutlinedInput-notchedOutline": {
      borderColor: "red"
    },
    "& .MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-input": {
      color: "purple"
    },
    "& .MuiInputLabel-root.Mui-focused": {
      color: "purple"
    },
    "& .MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline": {
      borderColor: "purple"
    }
  }
});

function App() {
  const [age, setAge] = React.useState("");
  const classes = useStyles();
  return (
    <div className="App">
      <TextField
        className={classes.root}
        value={age}
        onChange={e => setAge(e.target.value)}
        variant="outlined"
        label="My Label"
        select
      >
        <MenuItem value="">
          <em>None</em>
        </MenuItem>
        <MenuItem value={10}>Ten</MenuItem>
        <MenuItem value={20}>Twenty</MenuItem>
        <MenuItem value={30}>Thirty</MenuItem>
      </TextField>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Edit TextField outlined

Related answers:

Upvotes: 23

Adam Woolf
Adam Woolf

Reputation: 1

I also spent too long with this problem. In the end I just used a TextField and give it select prop. Then you can style it as the regular textfield.

Upvotes: 0

Sarah Ann Garcia
Sarah Ann Garcia

Reputation: 11

Okay in my style overrides for the theme I put this in...

MuiOutlinedInput: {
     root: {
         '&$focused $notchedOutline': {
         borderColor: 'inherit !important'
         }
     }
}

It seemed to the trick. It didn't address the Label... but it did address the border. I've spent WAY too many hours on this. So it will do for now.

Upvotes: 0

curiousdev
curiousdev

Reputation: 636

You can override styling of child element classes e.g.

selectBorder: {
  '& .MuiOutlinedInput-notchedOutline': {
    borderColor: 'red'
  }
}

If you apply className={classes.selectBorder} to your Select component, it will change the border color to red.

Upvotes: 3

Related Questions