改变材质UI选择组件的IconComponent的颜色

Question

对于我的项目，我使用MUI的Select和LanguageIcon作为IconComponent。

我想要做的是把这个图标变成白色(默认情况下是黑色的)，但是我不能让它工作。

我试着遵循这解决方案，但它对我不起作用。

import { makeStyles } from '@mui/styles';抛出“模块找不到:无法解决‘@梅/样式’”，并在他们的网站上说@梅/样式是不推荐的。

这就是我目前的情况：

import * as React from 'react';
import { FunctionComponent } from 'react';
import MenuItem from "@mui/material/MenuItem";
import FormControl from "@mui/material/FormControl";
import Select, {SelectChangeEvent} from "@mui/material/Select";
import { useRouter } from 'next/dist/client/router';
import LanguageIcon from '@mui/icons-material/Language';

const LocaleSelect: FunctionComponent = () => {

  const router = useRouter()
  const {locale, locales, pathname, asPath, query} = router;

  const handleLocaleChange = (event: SelectChangeEvent<string>) => {
    router.push({ pathname, query }, asPath, { locale: event.target.value})
  }

  return(
    <FormControl
      variant='standard'
      sx={{ m: 1, maxWidth: 32 }}
      color="primary" >
        
      <Select
        disableUnderline
        labelId="demo-simple-select-autowidth-label"
        id="demo-simple-select-autowidth"
        value={locale?.toLocaleUpperCase()}
        onChange={handleLocaleChange}
        autoWidth
        IconComponent={LanguageIcon} >
        {locales?.map((l) => {
          return <MenuItem key={l} value={l}>
            {l.toLocaleUpperCase()}</MenuItem>;
        })}
      </Select>
    </FormControl>
  )
}

export default LocaleSelect

这使得它看起来像这。

我设法使地球变白

IconComponent={() => <LanguageIcon htmlColor='white'/>}

但这将全球转移到正确的。

任何帮助都是很棒的，要么让地球变白，要么把它移到左边。

Answer 1

你可以做这样的事。

 <LanguageIcon 
      htmlColor="white" 
      sx={{ position: "absolute", left: ".5rem",cursor:'pointer',zIndex:-1 }}
 />

位置绝对使它很容易对齐图标在你想要的，但图标变得不可点击。为了解决这个问题，我添加了游标:指针，它部分地解决了问题，但还不能单击。因此，我降低了z指数。

减少z索引是有效的，因为单击图标实际上单击了父项，然后显示了选项。