reactjs - ThemeProvider 不会改变组件的主题，React

Question

我想将主题应用于 React 组件（类组件）。当我在同一个文件中定义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);

自定义文本字段：

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 帮助的链接，将不胜感激。谢谢

标签： reactjsmaterial-uistyled-components