Material ui 使用主题全局更新选择样式答案

【问题标题】：Material ui update select style globally with themeMaterial ui 使用主题全局更新选择样式
【发布时间】：2020-06-03 13:33:51
【问题描述】：

我正在尝试使用以下内容来更新所有轮廓选择的边框颜色，但它不起作用（显然边框的样式来自 fieldset 元素）。我试过MuiOutlinedInput 但这适用于所有的输入。有没有办法只针对选定的概述变体？

  overrides: {
    MuiButton: {
      outlined: {
        '&:hover': {
          boxShadow: 'none'
        },
      },
      contained: {
        '&:hover': {
          boxShadow: 'none'
        },
      }
    },
    MuiSelect: {
      root: {
        '& $notchedOutline': {
          borderColor: 'red',
        },
      }
    }
  }

【问题讨论】：

标签： javascript reactjs material-ui

【解决方案1】：

您尝试的问题是$notchedOutline 元素不是.MuiSelect-root 元素的后代，而是兄弟姐妹。概述的 select 的整体结构大致如下（省略了较少的相关细节）：

<div class="MuiFormControl-root">
   <div class="MuiOutlinedInput-root">
      <div class="MuiSelect-root MuiSelect-outlined MuiOutlinedInput-input">Displayed Text</div>
      <input type="hidden" value="Displayed Text">
      <fieldset class="MuiOutlinedInput-notchedOutline"><legend>less relevant details</legend></fieldset>
   </div>
</div>

下面是一个使用不同颜色自定义轮廓输入和轮廓选择的示例。

import React from "react";
import ReactDOM from "react-dom";
import TextField from "@material-ui/core/TextField";
import MenuItem from "@material-ui/core/MenuItem";
import { createMuiTheme, MuiThemeProvider } from "@material-ui/core/styles";
const theme = createMuiTheme({
  overrides: {
    MuiOutlinedInput: {
      root: {
        "& $notchedOutline": {
          borderColor: "pink"
        },
        "&$focused $notchedOutline": {
          borderColor: "red"
        },
        color: "blue",

        "& .MuiSelect-root ~ $notchedOutline": {
          borderColor: "green"
        },
        "&$focused .MuiSelect-root ~ $notchedOutline": {
          borderColor: "orange"
        },
        "& .MuiSelect-root": {
          color: "purple"
        }
      }
    }
  }
});
function App() {
  return (
    <MuiThemeProvider theme={theme}>
      <TextField
        variant="outlined"
        label="Outlined Input"
        defaultValue="My Text"
      />
      <br />
      <br />
      <TextField
        variant="outlined"
        label="Outlined Select"
        select
        value="My Text 1"
      >
        <MenuItem value="My Text 1">My Text 1</MenuItem>
        <MenuItem value="My Text 2">My Text 2</MenuItem>
      </TextField>
    </MuiThemeProvider>
  );
}

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