如何在道具中传递颜色以更改主题？

Question

嗨，我正在尝试传递颜色：主色或颜色：次要颜色，但我不知道该怎么做。

// @flow

import * as React from 'react';
import withStyles from '@material-ui/core/styles/withStyles';
import type { Theme } from '@material-ui/core/styles/createMuiTheme';
import classnames from 'classnames';

export const styles = (theme: Theme) => ({
  root: {
    backgroundColor: theme.palette.primary.main,
    width: '80px',
    height: '80px',
  },
  colorPrimary: {
    backgroundColor: theme.palette.primary.main,
  },
  colorSecondary: {
    backgroundColor: theme.palette.secondary.main,
  },
});

export type Props = {
  className?: string,
  classes: { [$Keys<$Call<typeof styles, Theme>>]: string },
  color?: string,
};

const TMPask = ({ classes, className, color }: Props) => (
  <div
    className={classnames(classes.root, className, {
      [classes.colorPrimary]: color === 'primary',
      [classes.colorSecondary]: color === 'secondary',
    })}
  >
    hello
  </div>
);

TMPask.defaultProps = {
  className: undefined,
  color: 'Primary',
};

export default withStyles(styles)(TMPask);

我需要样式const中的选择器在这两个主题之间进行更改，我想我需要一个if条件来获取colorPrimary或​​colorSecondary应用的重写根类，是否有帮助？

Answer 1