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

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

在通过传递 object 的 React 样式化方式和使用 MUI styles solution 生成类名 strings。

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

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 为您提供了三种方法来执行此操作，尽管组件之间的支持有所不同。

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

我自己很早就有一些困惑，所以我希望这个答案对其他人有所帮助。