Question

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

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

Answer 1

您尝试的问题是$notchedOutline元素不是.MuiSelect-root元素的后代，而是同级元素。概述的选择的总体结构大致如下（省略了较少的相关细节）：

<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);

材质ui使用主题全局更新选择样式

1 个答案: