如何使用material-ui v1.0.0-beta.40更改输入焦点上的错误颜色和下划线颜色

Question

我正在使用Material-UI v1.0.0-beta.40，我想更改边框颜色和错误文字颜色。

如何做到这一点？

Answer 1

其中一种方法是在MuiTheme内部

import { createMuiTheme } from 'material-ui/styles';
const myTheme = createMuiTheme({
    overrides:{
        MuiInput: {
            underline: {
                    '&:after': {
                      backgroundColor: 'any_color_hex',
                    }
              },
        },
    }
});
export default myTheme;

然后将其导入您的组件并使用：

import {MuiThemeProvider} from 'material-ui/styles';
import myTheme from './components/myTheme'

<MuiThemeProvider theme = {myTheme}>
<TextField />
</MuiThemeProvider>

希望这有帮助！

Answer 2

您可以使用errorStyle属性

来实现这一目标

  

errorStyle用于覆盖错误样式的样式对象

版本0.20.0

   <TextField
      hintText="Hint Text"
        errorText="This field is required"
        errorStyle={{color: 'green'}}
    />

工作演示

版本1.0.0测试版

const styles = theme => ({

  greenLabel: {
    color: '#4CAF50',
  },
  greenUnderline: {
    '&:before': {
      backgroundColor: '#4CAF50',    
    },
  },
  greenUnderline: {
    '&:after': {
      backgroundColor: '#4CAF50',
    },
  },

});


<FormControl >
  <InputLabel style={{color: 'green'}} htmlFor="name-simple">Error</InputLabel>
  <Input classes={{ inkbar: classes.greenInkbar, underline: classes.greenUnderline }} id="name-simple" value={this.state.name} onChange={this.handleChange} />
</FormControl>

Answer 3

以下是基于material-ui v1最新更改的解决方案。希望有帮助

list.stream().skip(asInt).collect(Collectors.toList());

Answer 4

不需要覆盖即可全局更改错误颜色。可以在定义全局颜色/主题元素的任何位置进行定义。例如：

import createMuiTheme from '@material-ui/core/styles/createMuiTheme';

export default createMuiTheme({
    palette: {
        primary: {
          main: '#FFFFFF',
        },
        secondary: {
          main: '#6200EE',
        },
        error: {
          main: '#D0180B',
        },
    },
});