材质ui更改选择框的颜色答案

【问题标题】：Material ui change color for select box材质ui更改选择框的颜色
【发布时间】：2021-12-26 03:16:41
【问题描述】：

这是我的代码，

import { AppBar, createStyles, MenuItem, Select, Toolbar, Typography } from '@mui/material';
import { makeStyles } from '@mui/styles';
import { useState } from 'react';

const useStyles = makeStyles((theme) =>
    createStyles({
        selectRoot: {
            color: "white",
        }
    }),
);

const Navbar = () => {

    const classes = useStyles();
    const [sort, setSort] = useState(1);

    return (
        <AppBar position="static">
            <Toolbar>
                <Typography variant="h6" sx={{ flexGrow: 1}}>Tools</Typography>
                <Select
                    variant="standard"
                    value={sort}
                    className={classes.selectRoot}
                    onChange={(event) => setSort(event.target.value)}
                >
                    <MenuItem value={1}>Default sort</MenuItem>
                    <MenuItem value={2}>Sort by Title ASC</MenuItem>
                    <MenuItem value={3}>Sort by Title DESC</MenuItem>
                </Select>
            </Toolbar>
        </AppBar>
    )
}

export default Navbar;

我需要改变选择标签的颜色。在检查中似乎被此类覆盖。

.css-a88p61-MuiInputBase-root-MuiInput-root{
    color: rgba(0, 0, 0, 0.87);
}

【问题讨论】：

backgroundColor或者borderColor你要改哪个颜色
@SachinYadav 字体颜色
menuItem 的字体颜色？
@SachinYadav 没有“选择”。
请清楚如果没有字体，您将如何设置选择的字体颜色，它必须用于 menuItems 或者您需要在选择下拉菜单时更改 menuItems 背景颜色跨度>

标签： reactjs material-ui

【解决方案1】：

您需要在您的选择标签中使用 .MuiMenuItem-root ，这将为您的整个菜单项着色。

 MenuProps={{
                        sx: {
                          "&& .MuiMenuItem-root":{
                            backgroundColor: "red",
                            color: "orange"
                          }
                        }
                       
                      }}

但是，如果您不想将颜色应用于特定的 menuItem，那么您需要使用 Select Component 中的 .MuiMenuItem-gutters 类并将 disableGutters={true} 设置为您不想应用颜色的 menuItem

使用.MuiMenuItem-root 类的示例

import { AppBar, createStyles, MenuItem, Select, Toolbar, Typography } from '@mui/material';
import { makeStyles } from '@mui/styles';
import { useState } from 'react';

const useStyles = makeStyles((theme) =>
    createStyles({
        selectRoot: {
            color: "white",
        },
        menuItem:{
            color: "red",
        }
    }),
);

const Select = () => {

    const classes = useStyles();
    const [sort, setSort] = useState(1);

    return (
        <AppBar position="static">
            <Toolbar>
                <Typography variant="h6" sx={{ flexGrow: 1}}>Tools</Typography>
                <Select
                    variant="standard"
                    value={sort}
                    className={classes.selectRoot}
                    onChange={(event) => setSort(event.target.value)}
                    MenuProps={{
                        sx: {
                          "&& .MuiMenuItem-root":{
                            backgroundColor: "red",
                            color: "orange"
                          }
                        }
                       
                      }}
                >
                    <MenuItem  value={1}>Default sort</MenuItem>
                    <MenuItem  value={2}>Sort by Title ASC</MenuItem>
                    <MenuItem  value={3}>Sort by Title DESC</MenuItem>
                </Select>
            </Toolbar>
        </AppBar>
    )
}

export default Select;

使用.MuiMenuItem-gutters 类的示例

import { AppBar, createStyles, MenuItem, Select, Toolbar, Typography } from '@mui/material';
import { makeStyles } from '@mui/styles';
import { useState } from 'react';

const useStyles = makeStyles((theme) =>
    createStyles({
        selectRoot: {
            color: "white",
        },
    }),
);

const Select = () => {

    const classes = useStyles();
    const [sort, setSort] = useState(1);

    return (
        <AppBar position="static">
            <Toolbar>
                <Typography variant="h6" sx={{ flexGrow: 1}}>Tools</Typography>
                <Select
                    variant="standard"
                    value={sort}
                    className={classes.selectRoot}
                    onChange={(event) => setSort(event.target.value)}
                    MenuProps={{
                        sx: {
                            "&& .MuiMenuItem-gutters": {
                                backgroundColor: "pink",
                                color: "red"
                              },
                        }
                       
                      }}
                >
                    <MenuItem  disableGutters = {true} value={1}>Default sort</MenuItem>
                    <MenuItem  value={2}>Sort by Title ASC</MenuItem>
                    <MenuItem  value={3}>Sort by Title DESC</MenuItem>
                </Select>
            </Toolbar>
        </AppBar>
    )
}

export default Select;

更多css属性请参考documentation

【讨论】：

不，我想更改选择标签中的颜色。 :(