小编ems*_*ggy的帖子

假设我有一个主题文件：

主题.js：

import {createMuiTheme} from "@material-ui/core/styles";

export const myTheme = createMuiTheme({
    palette: {
        text: {
            color: "#545F66",
        },
    },
});

和 App.js 文件，其中渲染看起来像这样：

return (
        <MuiThemeProvider theme={myTheme}>
            <CssBaseline />
            <MyComponent />
        </MuiThemeProvider>
    );

现在我知道我可以通过 withStyles 访问主题：

const StyledMyComponent = withStyles(theme => ({
    something: {
        color: theme.palette.text.color
    }    
}))(props => <MyComponent {...props} />);

但我想要实现的是不同的东西。MyComponent 是一个非常大的组件，例如具有名为“react-table-1”的类，我想要的是将类颜色“react-table-1”设置为 theme.palette.text ，如下所示：

const StyledMyComponent = withStyles(theme => ({
    "react-table-1": {
        color: theme.palette.text
    }    
}))(props => <MyComponent {...props} />);

但显然它不起作用。有谁知道这是否可能？我怎样才能做到这一点。

我可以在 css 文件中设置“react-table-1”颜色，但我想通过按钮在 react 内部更改它，这就是为什么我需要这样的东西。

现场演示：https …