首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >是否有一种方法可以在Material中不使用makeStyles来样式<TextField/>的边框颜色和文本颜色

是否有一种方法可以在Material中不使用makeStyles来样式<TextField/>的边框颜色和文本颜色
EN

Stack Overflow用户
提问于 2020-02-10 16:02:37
回答 1查看 1.1K关注 0票数 1

如果不使用makeStyles特性(例如css ),就可以对资料-UI进行样式化吗?只是想了解一下材料界面的工作原理。

底部的红色样式是我在这里试图用简单的css实现的风格。

EN

回答 1

Stack Overflow用户

发布于 2020-02-11 08:03:42

下面是一个示例,说明如何使用简单的CSS自定义概述的选择中的各种颜色。

styles.css

代码语言:javascript
运行
AI代码解释
复制
.customSelect {
  width: 200px;
}
.customSelect .MuiInputLabel-root {
  color: red;
}
.customSelect .MuiInputBase-input {
  color: green;
}
.customSelect .MuiOutlinedInput-notchedOutline {
  border-color: red;
}
.customSelect:hover .MuiOutlinedInput-notchedOutline {
  border-color: orange;
}
.customSelect
  .MuiOutlinedInput-root.Mui-focused
  .MuiOutlinedInput-notchedOutline {
  border-color: purple;
}
.customSelectMenu .MuiMenuItem-root {
  color: blue;
}

App.js

代码语言:javascript
运行
AI代码解释
复制
import React from "react";
import "./styles.css";
import TextField from "@material-ui/core/TextField";
import MenuItem from "@material-ui/core/MenuItem";

export default function App() {
  const [value, setValue] = React.useState("");
  return (
    <TextField
      className="customSelect"
      label="Sale Type"
      required
      select
      value={value}
      onChange={event => setValue(event.target.value)}
      variant="outlined"
      SelectProps={{ MenuProps: { className: "customSelectMenu" } }}
    >
      <MenuItem value={1}>Sale Type 1</MenuItem>
      <MenuItem value={2}>Sale Type 2</MenuItem>
    </TextField>
  );
}

有关答复:

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/60160225

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档