Question

我正在像这样使用TextField：

<TextField
    style={styles}
    className = "my-3"
    fullWidth
    id="filterBox"
    InputProps={{
        endAdornment: <SearchIcon style={{color: "white"}} />,
        className: styles.input
    }}
    variant = "outlined"
    label = {this.state.label}
    onChange={this.onChangeHandler.bind(this)}
/>

我正在尝试通过以下方式设置样式：

const styles = {
    textfield: {
      borderRadius: 2,
      fontWeight: 'bold',
      color: 'white',
      height: 48,
      width: '150dp',
    },
    input:{
        color: 'white',
        borderColor: '#50fbdb',
        border: 1
    },
    formLabelRoot:{
        '&$formLabelFocused': { 
            color: 'red'
        }
    }
  };

但是，看起来好像不是这样。

文档没有指定太多内容，因此我一直在搜索并发现：How to style material-ui textfield，但这几乎是我所做的，但仍然无法更改文本（更不用说聚焦样式）。

Answer 1

有很多解决方案。如果要全局更改此组件的样式，请使用createMuiTheme

如果要对特定组件进行此更改，可以使用withStyles函数。

下面或在codesandbox

中的示例

const CssTextField = withStyles({
  root: {
    '& .MuiOutlinedInput-input' : {
      color: "white",
    },
    '& .MuiInputLabel-outlined':{color: "white"},
    '& .MuiOutlinedInput-root': {
      '& fieldset': {
        borderColor: '#50fbdb',
      },
      '&:hover fieldset': {
        borderColor: 'darkRed',
      },
      '&.Mui-focused fieldset': {
        borderColor: 'red',
      },
    },
  },
})(TextField);

function App() {

  return (
    <CssTextField
        fullWidth
        id="filterBox"
        InputProps={{
            endAdornment: <SearchIcon style={{color: "white"}} />,
        }}
        variant = "outlined"
        label = "text field"
    />
  );
}

Answer 2

通过传递对象的 React 样式方式与使用 MUI styles solution 生成类名 的 Material-UI 方式之间似乎存在一些常见的混淆字符串。

尝试以下精简的测试组件：

import {makeStyles} from '@material-ui/core/styles';

const useTestStyles = makeStyles({
  test1: {fontSize: 40},
  test2: {color: 'red'}
});

function TestComponent() {
  const testStyles = useTestStyles();
  console.log(testStyles);
  return null;
}

控制台应该记录如下内容：{test1: "makeStyles-test1-3", test2: "makeStyles-test2-4"}

请注意，对象属性是字符串 - 内部生成的类名。您可以在通常使用 className 属性的任何地方使用这些。

示例：return <div className={testStyles.test2}>Red Text</div>;

或者如果你想应用所有的类名，任何字符串连接都可以：

const classNames = [testStyles.test1, testStyles.test2].join(' ');
return <div className={classNames}>Big Red Text</div>;

在上面的 InputProps 中，您试图将一个对象 (styles.input) 传递到 className 属性中。该属性需要一个字符串类名。

您传递给 TextInput 的样式对象还包含属性“textfield”、“label”和“formLabelRoot”。 React 应用这些就好像它们是 CSS 样式一样，但浏览器不知道如何处理这些信息，因此忽略了它。实际上，您正在执行以下操作：

<div style={{textfield:'[Object]'}}>Unrecognized style</div>

文档和示例倾向于使用通用变量名称，如“样式”，IMO 可能会造成混淆。

TLDR;

另一个困难似乎是由于像 TextField 这样的 MUI 组件由我们想要直接设置样式的嵌套组件（div、标签、输入等）组成。我们如何将特定的样式传递给子组件？

Material-UI 为您提供了三种方法来做到这一点，尽管支持因组件而异。

使用 nested selectors 定义样式。这似乎是最通用的，因为它使用 className 属性。 Material-UI 通过发布大多数子组件的子类名称来提供帮助。
使用 classes attribute。这通常有效，但某些组件不支持 classes。
使用特定属性，例如 InputProps。最简单，但最不通用，因为确切的属性是特定于组件的。

我一开始就有些困惑，所以我希望这个答案能帮助其他人。

如何设置材质ui元素的样式？

2 个答案:

TLDR;