如何更改材质 UI 选择边框和标签

IT技术 reactjs material-ui
2021-04-16 21:01:36

我正在尝试select从 Material-UI更改组件的边框。到目前为止，我已经尝试过：

const styles = theme => ({
  root: {
    display: "flex",
    flexWrap: "wrap",
    backgroundColor: "lightgrey"
  },
  formControl: {
    margin: theme.spacing.unit,
    minWidth: 120
  },
  selectEmpty: {
    marginTop: theme.spacing.unit * 2
  },
  cssLabel: {
    color: "pink",
    "&$cssFocused": {
      color: "pink"
    }
  },
  cssFocused: {
    color: "pink"
  },
  underline: {
    "&:after": {
      borderBottom: "1px solid pink",
      borderTop: "1px solid pink"
    }
  }
});

我可以自定义TextField等，但经过很多小时后，我仍然无法自定义选择。我也尝试通过Input，但是您必须自定义Input，这更糟。

有人可以帮我处理这个沙箱吗？

https://codesandbox.io/s/material-demo-ecj1k

我真的很感激。

4个回答

下面是覆盖默认、悬停和聚焦状态的边框 ( MuiOutlinedInput-notchedOutline)、标签 ( MuiInputLabel-root) 和所选项目文本 ( MuiOutlinedInput-input)颜色的示例。

import React from "react";
import ReactDOM from "react-dom";

import TextField from "@material-ui/core/TextField";
import MenuItem from "@material-ui/core/MenuItem";
import { makeStyles } from "@material-ui/core/styles";

const useStyles = makeStyles({
  root: {
    width: 200,
    "& .MuiOutlinedInput-input": {
      color: "green"
    },
    "& .MuiInputLabel-root": {
      color: "green"
    },
    "& .MuiOutlinedInput-root .MuiOutlinedInput-notchedOutline": {
      borderColor: "green"
    },
    "&:hover .MuiOutlinedInput-input": {
      color: "red"
    },
    "&:hover .MuiInputLabel-root": {
      color: "red"
    },
    "&:hover .MuiOutlinedInput-root .MuiOutlinedInput-notchedOutline": {
      borderColor: "red"
    },
    "& .MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-input": {
      color: "purple"
    },
    "& .MuiInputLabel-root.Mui-focused": {
      color: "purple"
    },
    "& .MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline": {
      borderColor: "purple"
    }
  }
});

function App() {
  const [age, setAge] = React.useState("");
  const classes = useStyles();
  return (
    <div className="App">
      <TextField
        className={classes.root}
        value={age}
        onChange={e => setAge(e.target.value)}
        variant="outlined"
        label="My Label"
        select
      >
        <MenuItem value="">
          <em>None</em>
        </MenuItem>
        <MenuItem value={10}>Ten</MenuItem>
        <MenuItem value={20}>Twenty</MenuItem>
        <MenuItem value={30}>Thirty</MenuItem>
      </TextField>
    </div>
  );
}

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

编辑文本字段概述

相关回答：

美丽的答案。您是如何决定不使用 Select 组件而使用带有 select 属性的 TextField 组件的？因为它更容易设计？感谢您的帮助
2021-06-09 21:01:36
TextField只是一般更容易使用，因为它负责确保FormControl, InputLabel,的正确结构Select，以及它们之间的一些可访问性关系。除非您需要自定义该结构，否则我建议使用 TextField。
2021-06-12 21:01:36
使用较低级别的部分时，样式方法将完全相同。然后，您将这个类应用到FormControl（它是由 TextField 呈现的根组件）。
2021-06-13 21:01:36

您可以覆盖子元素类的样式，例如

selectBorder: {
  '& .MuiOutlinedInput-notchedOutline': {
    borderColor: 'red'
  }
}

如果您应用className={classes.selectBorder}到您的Select组件，它会将边框颜色更改为红色。

实际上我想要的不是边框，而是当我单击下拉菜单时，聚焦边框。我在哪里可以得到我必须指出的class的名称？
2021-06-08 21:01:36

好的，我把这个主题的风格覆盖了......

MuiOutlinedInput: {
     root: {
         '&$focused $notchedOutline': {
         borderColor: 'inherit !important'
         }
     }
}

这似乎是诀窍。它没有解决标签问题……但它确实解决了边界问题。我在这上面花了太多时间。所以现在就可以了。

我也花了太长时间解决这个问题。最后我只使用了一个 TextField 并给它选择props。然后您可以将其设置为常规文本字段。

可以通过其他支持信息来改进您的答案。请编辑以添加更多详细信息，例如引文或文档，以便其他人可以确认您的答案是正确的。您可以在帮助中心找到有关如何编写好的答案的更多信息。
2021-06-12 21:01:36
其它你可能感兴趣的问题
上一篇如何将环境变量添加到 AWS 放大？ 下一篇如何使 ASP.NET/React 应用程序从子路径提供 SPA？