样式 MUI 文本字段占位符答案

【问题标题】：Style MUI TextField Placeholder样式 MUI 文本字段占位符
【发布时间】：2020-09-10 04:39:06
【问题描述】：

我需要将占位符字体粗细设为 400，将输入字体粗细设为 600，但它不起作用。我在这里寻找解决方案，但没有一个奏效。文档没有提到如何做到这一点。请帮忙！

import React from "react";
import { TextField, makeStyles } from "@material-ui/core";

const useStyles = makeStyles(() => ({
  input: {
    fontWeight: 600,
    "&::placeholder": {
      fontWeight: 400,
    },
  },
}));

function CustomizedInput() {
  const classes = useStyles();

  return (
    <TextField
      label="LOCATION"
      placeholder="Where are you going?"
      InputLabelProps={{
        shrink: true,
      }}
      InputProps={{
        className: classes.input,
      }}
      variant="filled"
    />
  );
}

export { CustomizedInput };

【问题讨论】：

标签： reactjs material-ui

【解决方案1】：

发现我做错了什么。这是一个愚蠢的语法错误。我应该使用 classes 属性而不是 ClassName。

InputProps={{
   classes: { input: classes.input }
}}

更多className和classes的区别请参考this post

【讨论】：