ThemeProvider не меняет тему компонента React - PullRequest
Новая
       48

ThemeProvider не меняет тему компонента React

0 голосов
/ 26 апреля 2020

Я хочу применить тему к React Component (Компонент класса). Эта тема отлично работает, когда я определяю ThemeProvider и CustomComponent в одном файле. Когда я разделяю файлы, он перестает работать. Это не относится к теме для компонента. Код указан ниже

Тематический компонент: 

import React, { Component } from "react";
import TextField from "@material-ui/core/TextField";
import PropTypes from "prop-types";
import { makeStyles, createStyles } from "@material-ui/core/styles";
import { green } from "@material-ui/core/colors";
import { withStyles } from "@material-ui/styles";

const Styles = makeStyles(theme =>
  createStyles({
    root: {
      "&.Mui-focused": {
        border: "20px solid red",
        "& .MuiOutlinedInput-notchedOutline": {
          border: "none"
        }
      }
    }
  })
);
class ThemedComponent extends Component {
  constructor(props) {
    super(props);

    this.state = {
      value: ""
    };
  }

  handlePasswordChange(event) {
    this.setState({ value: event.target.value });
  }
  render() {
    console.log("I am showing All Props", this.props);
    const { classes } = this.props;
    console.log("I am showing ", classes);
    return (
      <TextField
        onChange={event => this.handlePasswordChange(event)}
        variant="outlined"
        classes={{ root: classes.root }}
        InputProps={{ className: classes.root }}
      />
    );
  }
}
ThemedComponent.propTypes = {
  classes: PropTypes.object.isRequired
};

export default withStyles(Styles)(ThemedComponent);

CustomTextField: 

import React from "react";
import ThemedComponent from "./ThemedComponent";
import { orange } from "@material-ui/core/colors";
import { createMuiTheme, ThemeProvider } from "@material-ui/core/styles";
import { green } from "@material-ui/core/colors";

const theme = createMuiTheme({
  status: {
    borderStyle: "20px solid red"
  }
});
function CustomTextField() {
  return (
    <ThemeProvider theme={theme}>
      <ThemedComponent/>
    </ThemeProvider>
  );
}

export default CustomTextField;

Приложение. js: 

 return (
    <div className="App">
      <CustomTextField />
    </div>
  );

Вот ссылка на CodeSandBox Помощь будет принята с благодарностью. Спасибо

...