IT技术 - 如何在react中更改 material-ui 文本字段标签样式 - 吾爱随笔录

如何在react中更改 material-ui 文本字段标签样式

IT技术 javascript html css reactjs material-ui

2021-04-20 21:09:13

我是 Material-UI 的新手，我无法弄清楚，如何更改以灰色显示的标签的颜色。我想要它black。任何人都可以帮助我进行此查询吗？

这是代码：

import React from "react";
import ReactDOM from "react-dom";
import { TextField, Button, Grid } from "@material-ui/core";

class App extends React.Component {
  render() {
    return (
      <Grid container justify={"center"} alignItems={"center"} spacing={1}>
        <Grid item>
          <TextField
            id="outlined-name"
            label="Name"
            value={"Enter value"}
            onChange={() => console.log("I was changed")}
            margin="normal"
            variant="outlined"
          />
        </Grid>
        <Grid item>
          <Button variant="contained" color="primary">
            Submit
          </Button>
        </Grid>
      </Grid>
    );
  }
}

这是代码：“ https://codesandbox.io/s/fancy-morning-30owz ”

2个回答

如果您使用浏览器中的选择工具，您会发现：

使用的类名是MuiFormLabel-root

<label class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated MuiInputLabel-shrink MuiInputLabel-outlined MuiFormLabel-filled" data-shrink="true" for="outlined-name">Name</label>

所以使用嵌套选择器将样式设置为TextField组件

功能组件

import { makeStyles } from "@material-ui/core/styles";
const useStyles = makeStyles(theme => ({
  root: {
    "& .MuiFormLabel-root": {
      color: "red" // or black
    }
  }
}));
...
const classes = useStyles();

经典组件

import { withStyles, createStyles } from "@material-ui/core/styles";
const styles = theme => createStyles({
  root: {
    "& .MuiFormLabel-root": {
      color: "red"
    }
  }
});
...
const { classes } = this.props;
...
export default withStyles(styles)(App);

用法

<TextField
  className={classes.root}
  ...
>
</TextField>

通过这种方式，您可以更改标签颜色，如下图所示（当前为红色）

在线试一下：

我们不能在不创建功能组件的情况下直接提供给类 Component 吗？

2021-05-25 21:09:13

如果你想把你的风格放在一个单独的文件中，你可以这样写：

.MuiTextField-root > label {
    background-color: $bg-color;
    color: $color;
}

.MuiTextField-root > .MuiFormLabel-root.Mui-focused {
    color: $color;
}

其它你可能感兴趣的问题

上一篇React SPA 中的锚点或按钮？下一篇React：如何在将“this.state.x”用于函数之前等待数据？