Created
December 3, 2020 01:33
-
-
Save fabrizzio-gz/2fdc1ab787c8c3718b8a8eecc8b5060b to your computer and use it in GitHub Desktop.
Changing the label and arrow color of a Material-UI component demo [https://onestepcode.com/materialui-select-label-arrow-color/]
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import SelectComp from "./selectcomp"; | |
| function App() { | |
| return <SelectComp />; | |
| } | |
| export default App; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import React from "react"; | |
| import { makeStyles } from "@material-ui/core/styles"; | |
| import Container from "@material-ui/core/Container"; | |
| import Typography from "@material-ui/core/Typography"; | |
| import InputLabel from "@material-ui/core/InputLabel"; | |
| import MenuItem from "@material-ui/core/MenuItem"; | |
| import FormControl from "@material-ui/core/FormControl"; | |
| import Select from "@material-ui/core/Select"; | |
| const useStyles = makeStyles({ | |
| container: { | |
| marginTop: "10%", | |
| }, | |
| formControl: { | |
| minWidth: 120, | |
| }, | |
| label: { | |
| color: "darkred", | |
| "&.Mui-focused": { | |
| color: "darkred", | |
| }, | |
| }, | |
| select: { | |
| "&:after": { | |
| borderBottomColor: "darkred", | |
| }, | |
| "& .MuiSvgIcon-root": { | |
| color: "darkred", | |
| }, | |
| }, | |
| }); | |
| const SelectComp = () => { | |
| const classes = useStyles(); | |
| return ( | |
| <Container maxWidth="sm" className={classes.container}> | |
| <Typography variant="h5">Custom Select</Typography> | |
| <FormControl className={classes.formControl}> | |
| <InputLabel | |
| id="simple-select" | |
| className={classes.label} | |
| > | |
| Age | |
| </InputLabel> | |
| <Select | |
| labelId="simple-select" | |
| id="demo-simple-select" | |
| className={classes.select} | |
| > | |
| <MenuItem value={10}>Ten</MenuItem> | |
| <MenuItem value={20}>Twenty</MenuItem> | |
| <MenuItem value={30}>Thirty</MenuItem> | |
| </Select> | |
| </FormControl> | |
| </Container> | |
| ); | |
| }; | |
| export default SelectComp; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Thanks for sharing