我有一个材料库-ui风格的React组件 .

样式组件如下所示：

import React from "react";
import withStyles from "@material-ui/core/styles/withStyles";
import headerStyle from "material-kit-pro-react/assets/jss/material-kit-pro-react/components/headerStyle.jsx";

class Header extends React.Component {
    // ...
}
export default withStyles(headerStyle)(Header);

我想自定义组件的样式，但我希望保持库不受影响，以避免与将来的更新冲突 .

所以我决定创建自己的组件：

import React from "react";
import withStyles from "@material-ui/core/styles/withStyles";
import Header from "material-kit-pro-react/components/Header/Header.jsx";

export default withStyles(theme => ({
    primary: {
        color: "#000"
    }
}))(Header);

但是使用这种方法，JSS引擎为同一个组件创建了两个类（Header-primary-25 WithStyles-Header - primary-12） . 这不是一个问题，但在我的情况下，与组件中只需要一个类的方法存在一个小冲突：

headerColorChange() {
    const { classes, color, changeColorOnScroll } = this.props;
    // ...
    document.body
        .getElementsByTagName("header")[0]
        .classList.add(classes[color]) // classes[color] is a string with spaces (two classes)
    ;
    // ...
}

好 . 没什么大不了的 . 我可以修改该方法并解决问题 .

但是当我扩展课程时：

import React from "react";
import Header from "material-kit-pro-react/components/Header/Header.jsx";

export default class extends Header {
    constructor(props) {
        super(props);
        this.headerColorChange = this.headerColorChange.bind(this);
    }
    headerColorChange() {
        const { classes, color, changeColorOnScroll } = this.props
        console.log(classes[color])
    }
}

我得到与withStyles相关的错误：

withStyles.js:125 Uncaught TypeError: Cannot read property '64a55d578f856d258dc345b094a2a2b3' of undefined
    at ProxyComponent.WithStyles (withStyles.js:125)
    at new _default (Header.jsx:11)
    at new WithStyles(Header) (eval at ./node_modules/react-hot-loader/dist/react-hot-loader.development.js (http://localhost:8080/bundle.js:137520:54), <anonymous>:5:7)

而现在我迷路了 .

自定义已设置样式的组件的最佳方法是什么？

如何扩展和覆盖HoC（withStyles）的构造函数？

Edit to provide a better and minimal example:

我有一个我无法修改的组件，因为它是由库提供的：

./Component.jsx ：

import React from "react";
import withStyles from "@material-ui/core/styles/withStyles";

class Component extends React.Component {
    constructor(props) {
        super(props);
        this.headerColorChange = this.headerColorChange.bind(this);
    }

    componentDidMount() {
        window.addEventListener("scroll", this.headerColorChange);
    }

    headerColorChange() {
        const { classes } = this.props;

        // THIS FAILS IF classes.primary IS NOT A VALID CLASS NAME
        document.body.classList.add(classes.primary);
    }

    render() {
        const { classes } = this.props;
        return <div className={classes.primary}>Component</div>
    }
}

export default withStyles(theme => ({
    primary: {
        color: "#000"
    }
}))(Component);

我想自定义组件的主要颜色 . 直道：

./CustomizedComponent.jsx ：

import React from "react";
import withStyles from "@material-ui/core/styles/withStyles";

import Component from "./Component";

export default withStyles({
    primary: {
        color: "#00f"
    }
})(Component)

好 . 颜色变为＃0ff . 但是组件在 document.body.classList.add(classes.primary) 中失败，因为classes.primary包含两个连接的类名（Component-primary-13 WithStyles-Component - primary-12） . 如果我被允许修改原始组件就没有问题 . 但我不能，所以我决定扩展它并覆盖headerColorChange：

./CustomizedComponent.jsx ：

import React from "react";
import withStyles from "@material-ui/core/styles/withStyles";

import Component from "./Component";

class MyComponent extends Component {
    constructor(props) {
        super(props)
        this.headerColorChange = this.headerColorChange.bind(this);
    }

    headerColorChange() {
    }
}

export default withStyles({
    primary: {
        color: "#00f"
    }
})(MyComponent)

但后来我得到了错误：

withStyles.js:125 Uncaught TypeError: Cannot read property '64a55d578f856d258dc345b094a2a2b3' of undefined
    at ProxyComponent.WithStyles (withStyles.js:125)
    at new MyComponent (Header.jsx:7)
    at new WithStyles(Component) (eval at ./node_modules/react-hot-loader/dist/react-hot-loader.development.js (http://0.0.0.0:8080/bundle.js:133579:54), <anonymous>:5:7)
    at constructClassInstance (react-dom.development.js:12484)
    at updateClassComponent (react-dom.development.js:14255)

问题是：

是否可以完全覆盖组件的样式，因此我只获得一个类名？

如何将withStyles函数返回的组件扩展为更高阶的组件？

reactjs material-ui jss