Изменение цвета TextField в интерфейсе реагирования / материала - PullRequest
Новая
       14

Изменение цвета TextField в интерфейсе реагирования / материала

0 голосов
/ 01 ноября 2019

У меня есть компонент реагирования с текстовым полем и кнопкой. Я хочу, чтобы они выглядели зелеными на черном фоне, и я не могу изменить цвета по умолчанию для всех элементов. Исходя из этого вопроса: Как изменить цвет контура входного компонента React материала UI? ;Мне удалось изменить контур и цвет этикетки. Но я не нахожу способа изменить также цвет текста, введенного пользователем. Я предполагаю, что должен переопределить другое свойство, но я не нашел, какое из них.

Заранее спасибо за помощь.

С уважением

код App.js: 

import TestComponent from './TestComponent.js'
import {ThemeProvider } from '@material-ui/core/styles';
import theme from './Theme.js'

function App() {
  return (
    <ThemeProvider theme={theme}>
        <div>
        <TestComponent/>
      </div>
    </ThemeProvider>
  );
}

export default App;

код от Theme.js 


const Theme = createMuiTheme({
  palette: {
    primary: {
      main: '#2EFF22',
    },
    secondary: { main: '#22BF19' },
    grey: { main: '#22BF19' }
  },
  overrides: {
    MuiOutlinedInput: {
      root: {
        position: 'relative',
        '& $notchedOutline': {
          borderColor: '#2EFF22',
        },
        '&:hover:not($disabled):not($focused):not($error) $notchedOutline': {
          borderColor: '#2EFF22',
          // Reset on touch devices, it doesn't add specificity
          '@media (hover: none)': {
            borderColor: '#2EFF22',
          },
        },
        '&$focused $notchedOutline': {
          borderColor: '#2EFF22',
          borderWidth: 1,
        },
      },
    },
    MuiFormLabel: {
      root: {
        '&$focused': {
          color: '#2EFF22'
        }
      }
    }
  }
})

export default Theme

код от TestComponent 

import Button from '@material-ui/core/Button';
import TextField from '@material-ui/core/TextField';

class TestComponent extends Component {
  constructor(props) {
    super(props)
  }

  render () {

    return (
      <div style={{ display: 'flex', flexDirection: 'column', backgroundColor:'black' }}>
        <TextField id="Password" variant="outlined" required label="Password" style={{width:'150px', margin:'20px'}}/>
        <Button style={{width:'150px', margin:'20px'}} color="primary" variant="contained" onClick={() => console.log('OK')}>
         OK
        </Button>
      </div>
    );
  }

}

export default TestComponent

1 Ответ

1 голос
/ 01 ноября 2019

просто добавьте простой HOC withStyles. 

import React from "react";
import Button from "@material-ui/core/Button";
import TextField from "@material-ui/core/TextField";
import { withStyles } from "@material-ui/core/styles";

const styles = {
  root: {
    background: "black"
  },
  input: {
    color: "#2EFF22"
  }
};

class TestComponent extends React.Component {
  render() {
    const { classes } = this.props;
    return (
      <div
        style={{
          display: "flex",
          flexDirection: "column",
          backgroundColor: "black"
        }}
      >
        <TextField
          id="Password"
          variant="outlined"
          required
          label="Password"
          InputProps={{
            className: classes.input
          }}
          style={{ width: "150px", margin: "20px" }}
        />
        <Button
          style={{ width: "150px", margin: "20px" }}
          color="primary"
          variant="contained"
          onClick={() => console.log("OK")}
        >
          OK
        </Button>
      </div>
    );
  }
}

export default withStyles(styles)(TestComponent);

здесь, вы работаете, ссылка: https://codesandbox.io/s/wizardly-river-gd4d2

...