const styles = makeStyles((theme) => ({
root: { margin: "0px 20px" },
textStyle: {
fontFamily: "Comfortaa",
},
container: {},
textField: {
fontFamily: "Comfortaa",
},
dropDownFormSize: {
width: "100%",
fontFamily: "Comfortaa",
},
optionDropdown: {
color: "black",
},
dropDownSelector: {
color: "black",
backgroundColor: "tomato",
},
nativeInput: {
opacity: "1",
},
}));
const MainTable: React.FC = () => {
const classes = styles();
<FormControl
classes={{
root: classes.dropDownFormSize,
}}
>
<Select
required
className={classes.dropDownSelector}
value={emotion[i]}
name="emotion"
onChange={handleChangeEmotion(i)}
classes={{
root: classes.optionDropdown,
select: classes.optionDropdown,
// using nativeInput here gives me error
nativeInput: classes.nativeInput,
}}
MenuProps={{
anchorOrigin: {
vertical: "bottom",
horizontal: "left",
},
getContentAnchorEl: null,
MenuListProps: {
className: classes.optionDropdown,
},
}}
placeholder="Select Something"
native={false}
>
<MenuItem
value=""
disabled
// className={
// classes.optionItems
// }
>
Select Emotion
</MenuItem>
{emotions.map((emotion, i) => {
return (
<MenuItem
key={i}
// className={
// classes.optionItems
// }
value={emotion}
>
{emotion}
</MenuItem>
);
})}
</Select>
</FormControl>;
};
I want to remove opacity from the .MuiSelect-nativeInput Class. When I try to override this class using the nativeInput rule, I get this error message :-
Object literal may only specify known properties, and 'nativeInput' does not exist in type 'Partial<ClassNameMap<SelectClassKey>>'. Eventhough, nativeInput rule is given in the documentation of Select API. I have tried to override it in the Theme file but again, I get the error that nativeInput does not exist. How can I remove the opacity from the MuiSelect-nativeInput class.
You can instead use a TextField rendered as a select input.
const useStyles = makeStyles({
root: {
"& .MuiSelect-nativeInput": {
opacity: 1,
},
},
});
<TextField
select
classes = {{ root: classes.root }}
/>
Related
I'm using a DatePicker component from Mui Lab and I am trying to style the Calendar component by adding some border or background color. I used the PaperProps prop for DatePicker but it's not styling it. Trying to understand why I cant just use an SX prop for it
this is the calendar where i want to add a border to
import PropTypes from 'prop-types';
import { TextField } from '#material-ui/core';
import { alpha } from '#material-ui/core/styles';
import DatePicker from '#material-ui/lab/DatePicker';
import { AppBorderStyle } from '../theme';
export const DateField = (props) => {
const {
error,
fullWidth,
helperText,
label,
onChange,
onBlur,
placeholder,
disabled,
value,
name,
...other
} = props;
return (
<DatePicker
PopperProps={{
sx: {
'& .MuiPaper-root': {
backgroundColor: 'red',
border: '1px solid black',
}
}
}}
onChange={onChange}
renderInput={({ InputProps, ...rest }) => (
<TextField
{...rest}
disabled={disabled}
onBlur={onBlur}
name={name}
error={error}
fullWidth={fullWidth}
helperText={helperText}
label={label}
placeholder={placeholder}
sx={{
'& .MuiFilledInput-root': {
backgroundColor: 'background.paper',
borderRadius: 1,
border: AppBorderStyle,
px: 1.5,
py: 0.75,
transition: (theme) => theme.transitions.create([
'border-color',
]),
'&:hover': {
backgroundColor: 'background.paper'
},
'&.Mui-focused': {
backgroundColor: 'background.paper',
boxShadow: (theme) => `${alpha(theme.palette.primary.main,
0.25)} 0 0 0 0.2rem`
},
'& .MuiFilledInput-input': {
fontSize: 14,
height: 'unset',
lineHeight: 1.6,
p: 0
},
'&.Mui-disabled': {
backgroundColor: 'action.disabledBackground',
boxShadow: 'none',
borderColor: alpha('#D6DBE1', 0.5)
}
}
}}
variant="filled"
InputProps={{
disableUnderline: true,
...InputProps
}}
InputLabelProps={{
shrink: true,
sx: {
color: 'text.primary',
fontSize: 14,
fontWeight: 500,
mb: 0.5,
position: 'relative',
transform: 'none'
}
}}
/>
)}
value={value}
{...other}
/>
);
};
DateField.defaultProps = {
disabled: false,
};
DateField.propTypes = {
disabled: PropTypes.bool,
error: PropTypes.bool,
fullWidth: PropTypes.bool,
helperText: PropTypes.string,
label: PropTypes.string,
name: PropTypes.string,
onChange: PropTypes.func.isRequired,
onBlur: PropTypes.func.isRequired,
placeholder: PropTypes.string,
value: PropTypes.instanceOf(Date)
};
I noticed you're using depecrated version of mui as you can check here. For newer versions of material UI components, we import material components from #mui and not from #material-ui.
I'm not sure if the classes are the same in your version or not. But the issue for your case looks like you are targeting the wrong class to add a border. You need to target MuiPickersPopper-root class to change the border.
PopperProps={{
sx: {'&.MuiPickersPopper-root': {border: '4px solid red'},},
}}
I created a solution of DatePicker with the border here. Cheers!
I'm trying to change the width, height and color of table pagination on Material-ui V5.0 with React, but it does not accept classes. As the pagination uses .MuiToolbar-root, if I make changes with a .css file, it brakes my MuiToolbar at the top of the App page. How should I apply the changes needed without braking the Appbar at the top? Also, I will need to change the padding of .MuiTableCell-root as well. I'm sending my code bellow. Please all helps will be very appreciated.
// Component SupplierTable
import React, {useState} from 'react'
import './SupplierTable.css';
import SupplierForm from './SupplierForm';
import PageHeader from '../components/PageHeader';
import FactoryIcon from '#mui/icons-material/Factory';
import * as supplierService from '../services/EmployeeService';
import Controls from "../components/controls/Controls";
import { InputAdornment } from '#mui/material';
import SearchIcon from '#mui/icons-material/Search';
import AddIcon from '#mui/icons-material/Add';
import Box from '#mui/material/Box';
import Paper from '#mui/material/Paper';
import useTable from "../components/useTable";
import { makeStyles } from '#mui/styles';
import ModeEditOutlineIcon from '#mui/icons-material/ModeEditOutline';
import { TableRow, TableBody, TableCell } from '#mui/material';
import CloseIcon from '#mui/icons-material/Close';
import Popup from '../components/Poup';
import Notification from '../components/Notifications';
import ConfirmDialog from '../components/ConfirmDialog';
import Grid from '#mui/material/Grid';
const useStyles = makeStyles(theme => ({
overrides: {
'&.MuiTablePagination-root':{
width: '960px',
height: '35px',
backgroundColor: '#a9aeb3',
color: 'rgb(41, 39, 39)',
fontFamily: 'Arial, Helvetica, sansSerif',
fontWeight: '700',
}
},
pageContent: {
margin: theme.spacing(1),
padding: theme.spacing(3)
},
searchInput: {
width: '50%'
},
newButton: {
position: 'absolute',
right: '0px'
},
}));
const headCells = [
{ id: 'fullName', label: 'Employee Name' },
{ id: 'email', label: 'Email Address (Personal)' },
{ id: 'mobile', label: 'Mobile Number' },
{ id: 'department', label: 'Department' },
{ id: 'actions', label: 'Actions', disableSorting: true }
]
export default function Supplyer() {
const classes = useStyles();
const [recordForEdit, setRecordForEdit] = useState(null)
const [records, setRecords] = useState(supplierService.getAllSuppliers())
const [filterFn, setFilterFn] = useState({ fn: items => { return items; } })
const [openPopup, setOpenPopup] = useState(false)
const [notify, setNotify] = useState({ isOpen: false, message: '', type: '' })
const [confirmDialog, setConfirmDialog] = useState({ isOpen: false, title: '', subTitle: '' })
const {
TblContainer,
TblHead,
TblPagination,
recordsAfterPagingAndSorting
} = useTable(records, headCells, filterFn);
const handleSearch = e => {
let target = e.target;
setFilterFn({
fn: items => {
if (target.value == "")
return items;
else
return items.filter(x => x.fullName.toLowerCase().includes(target.value))
}
})
}
const addOrEdit = (employee, resetForm) => {
if (employee.id == 0)
supplierService.insertEmployee(employee)
else
supplierService.updateEmployee(employee)
resetForm()
setRecordForEdit(null)
setOpenPopup(false)
setRecords(supplierService.getAllEmployees())
setNotify({
isOpen: true,
message: 'Submitted Successfully',
type: 'success'
})
}
const openInPopup = item => {
setRecordForEdit(item)
setOpenPopup(true)
}
const onDelete = id => {
setConfirmDialog({
...confirmDialog,
isOpen: false
})
supplierService.deleteEmployee(id);
setRecords(supplierService.getAllEmployees())
setNotify({
isOpen: true,
message: 'Deleted Successfully',
type: 'error'
})
}
return (
<>
<PageHeader
title= "Fornecedores"
subTitle="Tabela de Fornecedores - Novo / Atualizar"
icon={<FactoryIcon fontSize="large" text-align='center'/>}
/>
<Box sx={{width: "1060px"}}>
<Paper className={classes.pageContent}>
<Grid container direction= 'row' justifyContent="space-between" >
<Controls.Input
label="Pesquisar Fornecedor"
className={classes.searchInput}
InputProps={{
startAdornment: (<InputAdornment position="start">
<SearchIcon />
</InputAdornment>)
}}
onChange={handleSearch}
/>
<Controls.Button
text="Adicionar"
variant="outlined"
color="primary"
startIcon={<AddIcon />}
className={classes.newButton}
onClick={() => { setOpenPopup(true); setRecordForEdit(null); }}
/>
</Grid>
<TblContainer>
<TblHead />
<TableBody>
{
recordsAfterPagingAndSorting().map(item =>
(<TableRow key={item.id}>
<TableCell>{item.fullName}</TableCell>
<TableCell>{item.email}</TableCell>
<TableCell>{item.mobile}</TableCell>
<TableCell>{item.department}</TableCell>
<TableCell>
<Controls.ActionButton
color="primary"
onClick={() => { openInPopup(item) }}>
<ModeEditOutlineIcon fontSize="small" />
</Controls.ActionButton>
<Controls.ActionButton
color="secondary"
onClick={() => {
setConfirmDialog({
isOpen: true,
title: 'Are you sure to delete this record?',
subTitle: "You can't undo this operation",
onConfirm: () => { onDelete(item.id) }
})
}}>
<CloseIcon fontSize="small" />
</Controls.ActionButton>
</TableCell>
</TableRow>)
)
}
</TableBody>
</TblContainer>
**strong text** // Pagination begins here!!!!!
<TblPagination components={{
Toolbar: props => (
<div>
style={{ backgroundColor: '#a9aeb3', width: '950px', color: 'rgb(41, 39, 39)',
height: '35px' }}
</div>
)
}}/>
</Paper>
</Box>
<Popup
title="Employee Form"
openPopup={openPopup}
setOpenPopup={setOpenPopup}
>
<SupplierForm
recordForEdit={recordForEdit}
addOrEdit={addOrEdit} />
</Popup>
<Notification
notify={notify}
setNotify={setNotify}
/>
<ConfirmDialog
confirmDialog={confirmDialog}
setConfirmDialog={setConfirmDialog}
/>
</>
)
}
I've been struggling with styling the pagination component myself, but just got it working using sx.
Try with something like this:
<TablePagination
sx={{
'.MuiTablePagination-toolbar': {
backgroundColor: '#a9aeb3',
width: '950px',
color: 'rgb(41, 39, 39)',
height: '35px',
},
}}
/>
Edit:
I tried styling "everything" just to see how it would be done, look here for ideas if there was something else you needed to style.
<Pagination
{...mTablePaginationProps}
rowsPerPage={rowsPerPage}
onRowsPerPageChange={onRowsPerPageSelect}
component="div"
onPageChange={onPageChange}
sx={{
backgroundColor: 'red !important', // gets overridden if not important
height: '70px',
'.MuiInputBase-root': {
backgroundColor: 'green',
},
'.MuiTablePagination-toolbar': {
backgroundColor: 'pink',
width: '950px',
color: 'rgb(41, 39, 39)',
height: '35px',
},
'.MuiBox-root': {
backgroundColor: 'yellow',
color: 'black',
'& .MuiSvgIcon-root': {
backgroundColor: 'purple',
color: 'black',
},
},
}}
SelectProps={{
...mTablePaginationProps.SelectProps,
MenuProps: {
...mTablePaginationProps.SelectProps.MenuProps,
sx: {
'.MuiPaper-root': {
backgroundColor: 'rosybrown',
color: 'black',
},
'.MuiTablePagination-menuItem': {
':hover': {
backgroundColor: 'turquoise',
},
backgroundColor: 'yellow',
},
'.MuiTablePagination-menuItem.Mui-selected': {
':hover': {
backgroundColor: 'blue',
},
backgroundColor: 'purple',
},
},
},
}}
/>
This ends up looking like this:
const styles = makeStyles((theme) => ({
dropDownFormSize: { width: '60%' },
dropDownSelector: {
// fontFamily: 'Comfortaa',
fontSize: '15px',
},
optionDropdown: {
paddingLeft: '10px',
color: 'white',
},
option: {
color: 'white',
border: `1px solid ${theme.palette.primary.contrastText}`,
'&:focus': {
border: `1px solid ${theme.palette.secondary.contrastText} !important`,
},
},
optionItems: {
// work on the hover
backgroundColor: `${theme.palette.primary.light} !important`,
// this hover do not get triggered unless I trigger it from
//the dev tool
'&:hover': {
backgroundColor: ` ${theme.palette.secondary.contrastText} !important`,
},
},
}));
const dummyElement = () => {
const classes = styles();
const languageArray = ['English', 'Mexican', 'Italian', 'Persian'];
return (
<FormControl className={classes.dropDownFormSize}>
<NativeSelect
required
className={classes.dropDownSelector}
value={language}
name='language'
onChange={handleChangeLanguage}
classes={{
root: classes.optionDropdown,
select: classes.option,
}}
>
<option
value=''
disabled
className={classes.optionItems}
>
Select Option
</option>
{languageArray.map((language, i) => {
return (
<option
key={i}
className={classes.optionItems}
value={language}
>
{language}
</option>
);
})}
</NativeSelect>
</FormControl>
);
}
The problem is when I hover over the options in the native select, the hover of the option does not get triggered (If I trigger the :hover from the dev tools, then the styles are applied). When I hover over the items, there is some white background and I'm trying to override it but I can't find the style of it in the inspector.
Can't get 'selected' or 'hover colors to work for ListItem. For selected tried setting its classes like:
<ListItem selected button key="home" classes={{ selected: classes.listItemSelected }}>
<ListItemText primary="Hi"/>
</ListItem>
and then setting the style like:
const useStyles = makeStyles((theme) => ({
listItemSelected:{
backgroundColor: "#ff0000",
},
}));
But it doesn't do anything, the 'selected' is described in the ListItem component API here.
How do you get to set the color of both the selected and hover for ListItem?
Below is the portion of the default ListItem styles that deals with the background color:
export const styles = (theme) => ({
/* Styles applied to the (normally root) `component` element. May be wrapped by a `container`. */
root: {
'&$focusVisible': {
backgroundColor: theme.palette.action.selected,
},
'&$selected, &$selected:hover': {
backgroundColor: theme.palette.action.selected,
},
'&$disabled': {
opacity: 0.5,
},
},
/* Pseudo-class applied to the `component`'s `focusVisibleClassName` prop if `button={true}`. */
focusVisible: {},
/* Styles applied to the inner `component` element if `button={true}`. */
button: {
transition: theme.transitions.create('background-color', {
duration: theme.transitions.duration.shortest,
}),
'&:hover': {
textDecoration: 'none',
backgroundColor: theme.palette.action.hover,
// Reset on touch devices, it doesn't add specificity
'#media (hover: none)': {
backgroundColor: 'transparent',
},
},
},
/* Pseudo-class applied to the root element if `selected={true}`. */
selected: {},
});
The important thing to notice is that the selected styling is done via a combination of two classes (root and selected), so if you try to override it using a single class you will not have sufficient specificity.
Below is an example showing one way to override the selected and hover states:
import React from "react";
import { makeStyles, withStyles } from "#material-ui/core/styles";
import List from "#material-ui/core/List";
import MuiListItem from "#material-ui/core/ListItem";
import ListItemIcon from "#material-ui/core/ListItemIcon";
import ListItemText from "#material-ui/core/ListItemText";
import Divider from "#material-ui/core/Divider";
import InboxIcon from "#material-ui/icons/Inbox";
import DraftsIcon from "#material-ui/icons/Drafts";
const useStyles = makeStyles((theme) => ({
root: {
width: "100%",
maxWidth: 360,
backgroundColor: theme.palette.background.paper
}
}));
const ListItem = withStyles({
root: {
"&$selected": {
backgroundColor: "red",
color: "white",
"& .MuiListItemIcon-root": {
color: "white"
}
},
"&$selected:hover": {
backgroundColor: "purple",
color: "white",
"& .MuiListItemIcon-root": {
color: "white"
}
},
"&:hover": {
backgroundColor: "blue",
color: "white",
"& .MuiListItemIcon-root": {
color: "white"
}
}
},
selected: {}
})(MuiListItem);
export default function SelectedListItem() {
const classes = useStyles();
const [selectedIndex, setSelectedIndex] = React.useState(1);
const handleListItemClick = (event, index) => {
setSelectedIndex(index);
};
return (
<div className={classes.root}>
<List component="nav" aria-label="main mailbox folders">
<ListItem
button
selected={selectedIndex === 0}
onClick={(event) => handleListItemClick(event, 0)}
>
<ListItemIcon>
<InboxIcon />
</ListItemIcon>
<ListItemText primary="Inbox" />
</ListItem>
<ListItem
button
selected={selectedIndex === 1}
onClick={(event) => handleListItemClick(event, 1)}
>
<ListItemIcon>
<DraftsIcon />
</ListItemIcon>
<ListItemText primary="Drafts" />
</ListItem>
</List>
<Divider />
<List component="nav" aria-label="secondary mailbox folder">
<ListItem
button
selected={selectedIndex === 2}
onClick={(event) => handleListItemClick(event, 2)}
>
<ListItemText primary="Trash" />
</ListItem>
<ListItem
button
selected={selectedIndex === 3}
onClick={(event) => handleListItemClick(event, 3)}
>
<ListItemText primary="Spam" />
</ListItem>
</List>
</div>
);
}
Related answers:
How to overried the selected classes in menuItem in material ui REACTjs?
How to change the styles of ListItem element with the "onclick" event?
You can use the sx prop in MUI v5:
<List
sx={{
// selected and (selected + hover) states
'&& .Mui-selected, && .Mui-selected:hover': {
bgcolor: 'red',
'&, & .MuiListItemIcon-root': {
color: 'pink',
},
},
// hover states
'& .MuiListItemButton-root:hover': {
bgcolor: 'orange',
'&, & .MuiListItemIcon-root': {
color: 'yellow',
},
},
}}
>
Or styled to create a styled component that can be reused multiple times:
import MuiList from '#mui/material/List';
const List = styled(MuiList)({
// selected and (selected + hover) states
'&& .Mui-selected, && .Mui-selected:hover': {
backgroundColor: 'red',
'&, & .MuiListItemIcon-root': {
color: 'pink',
},
},
// hover states
'& .MuiListItemButton-root:hover': {
backgroundColor: 'orange',
'&, & .MuiListItemIcon-root': {
color: 'yellow',
},
},
});
Live Demo
I'm trying to use a Material UI Select component on a dark background:
But I'm unable to change the color of the drop down icon and underline border to white. I've looked at overriding the styles using classes, and I'm able to change color with the following:
const styles = theme => {
root: {
borderBottom: '1px solid white',
},
icon: {
fill: 'white',
},
}
class MyComponent extends React.Component {
render() {
const {classes} = this.props;
return (
<Select
value={this.props.value}
inputProps={{
classes: {
root: classes.border,
icon: classes.icon,
},
}}
>
<MenuItem
value={this.props.value}
>
Foo
</MenuItem>
</Select>
)
}
}
However, I cannot seem to set the color of the underline while the Select component is in focus, i.e. with the above code, I get the white underline and icon, but while focus is on the component the underline stays black.
With some help from Jan-Philipp I got everything colored white, also while the component stays in focus:
const styles = theme => ({
select: {
'&:before': {
borderColor: color,
},
'&:after': {
borderColor: color,
}
},
icon: {
fill: color,
},
});
class MyComponent extends React.Component {
render() {
const {classes} = this.props;
return (
<Select
value="1"
className={{classes.select}}
inputProps={{
classes: {
icon: classes.icon,
},
}}
>
<MenuItem value="1"> Foo 1</MenuItem>
<MenuItem value="2"> Foo 2</MenuItem>
</Select>
)
}
}
Not a very pretty solution to getting the right contrast, but it does the job.
Edit
The above answer is missing some code, and is also missing the hover color, as suggested by #Sara Cheatham. See updated hooks based solution:
const useStyles = makeStyles({
select: {
'&:before': {
borderColor: 'white',
},
'&:after': {
borderColor: 'white',
},
'&:not(.Mui-disabled):hover::before': {
borderColor: 'white',
},
},
icon: {
fill: 'white',
},
root: {
color: 'white',
},
})
export const MyComponent = () => {
const classes = useStyles()
return (
<Select
className={classes.select}
inputProps={{
classes: {
icon: classes.icon,
root: classes.root,
},
}}
value='1'
>
<MenuItem value='1'> Foo 1</MenuItem>
<MenuItem value='2'> Foo 2</MenuItem>
</Select>
)
}
I don't know why setting the color of the border and icon got so complicated. In any case, the answer above didn't help me with setting the icon color. Eventually, I found the solution via this code:
text color: white
border: rgba(228, 219, 233, 0.25)
icon (arrow): white
<Select
// IconComponent={() => <ArrowDropDownIcon style={{marginRight:10,pointerEvents:'none'}}/>}
labelStyle={{ color: '#ff0000' }}
sx={{
color: "white",
'.MuiOutlinedInput-notchedOutline': {
borderColor: 'rgba(228, 219, 233, 0.25)',
},
'&.Mui-focused .MuiOutlinedInput-notchedOutline': {
borderColor: 'rgba(228, 219, 233, 0.25)',
},
'&:hover .MuiOutlinedInput-notchedOutline': {
borderColor: 'rgba(228, 219, 233, 0.25)',
},
'.MuiSvgIcon-root ': {
fill: "white !important",
}
}}
labelId="select-filter-by-field-labe;"
id="select-filter-by-field"
value={'some value'}
>
</Select>
You can change the bottom border color with the following code. Hope this helps you.
const styles = theme => ({
select: {
"&:before": {
borderColor: "red"
}
}
});
const MySelect = ({ classes }) => (
<Select value="1" className={classes.select}>
<MenuItem value="1">Option 1</MenuItem>
<MenuItem value="2">Option 2</MenuItem>
<MenuItem value="3">Option 3</MenuItem>
</Select>
);
Example in CodeSandbox
You can change the border color and SVG icon color of a MUI <Select> component using the following declaration:
<Select
sx={{
height: '2.5rem',
color: 'white',
'& .MuiOutlinedInput-notchedOutline': {
borderColor: 'white'
},
'& .MuiSvgIcon-root': {
color: 'white'
}
}}
>
You can access input (and the underline) like so:
<Select
autoWidth
classes={{
root: styles.root,
select: styles.select
}}
displayEmpty
input={
<Input
classes={{
underline: styles.underline
}}
/>
}
onChange={this.onChange}
value=""
>
select: {
'&:before': {
borderColor: 'var(--galaxy-blue)',
},
'&:hover:not(.Mui-disabled):before': {
borderColor: 'var(--galaxy-blue)',
}
},
<Select
className={classes.select}
value={selected}
onChange={this.handleChange}
>
This worked for me:
import {
FormControl,
InputLabel,
Select,
MenuItem,
OutlinedInput as MuiOutlinedInput,
} from "#material-ui/core";
const OutlinedInput = withStyles((theme) => ({
notchedOutline: {
borderColor: "white !important",
},
}))(MuiOutlinedInput);
const useStyles = makeStyles((theme) => ({
select: {
color: "white",
},
icon: { color: "white" },
label: { color: "white" },
}));
function Component() {
return (
<FormControl variant="outlined">
<InputLabel id="labelId" className={classes.label}>
Label
</InputLabel>
<Select
labelId="labelId"
classes={{
select: classes.select,
icon: classes.icon,
}}
input={<OutlinedInput label="Label" />}
>
<MenuItem>A</MenuItem>
<MenuItem>B</MenuItem>
</Select>
</FormControl>
);
}
This worked for me:
<Select
sx={{
"& .MuiSvgIcon-root": {
color: "white"
}
}}
>
I faced the same problem and I fixed it this:
I added the .css file into react file:
import './index.css';
<Select
labelId="demo-simple-select-standard-label"
id="demo-simple-select-standard"
value={selectedRegion}
onChange={handleChangeSelectOption}
label="region"
className="select-options-navbar-main-color"
>
{regionList.map((item)=>{
return <MenuItem key={item} value={item}>{item}</MenuItem>
})}
</Select>
and at the end the most important file .css file:
:root{
--select-options-navbar-main-color: white;
}
.select-options-navbar-main-color div{
color: var(--select-options-navbar-main-color) !important;
}
.select-options-navbar-main-color::before {
border-color: var(--select-options-navbar-main-color) !important;
}
.select-options-navbar-main-color::after {
border-color: var(--select-options-navbar-main-color) !important;
}
.select-options-navbar-main-color:not(.Mui-disabled):hover::before {
border-color: var(--select-options-navbar-main-color) !important;
}
.select-options-navbar-main-color svg{
fill: var(--select-options-navbar-main-color) !important;
}
There is a root class available in MUI documentation, we can easily override that, for arrow and border outline
<Select variant='outlined' sx={{'.MuiSelect-icon': {
color: 'white'
},
".MuiSelect-outlined":{
color: 'white'
}}}>