Настройка с помощью пользовательского интерфейса материалов Стили React в стиле компонентов

Question

У меня есть библиотека компонентов React в стиле Material-UI.

Стилизованные компоненты выглядят так:

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 создает два класса для одного компонента (Заголовок-основной-25 (заголовок -Sity-заголовок-основной-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)?

Отредактируйте, чтобы предоставить лучший и минимальный пример:

У меня есть компонент, который я не могу изменить, поскольку он предоставляется библиотекой:

./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, как компонент более высокого порядка