Как передать цвет в реквизит, чтобы сменить тему?

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 o colorSecondary примененный переопределяющий класс root, любая помощь?

Answer 1

Вы можете преобразовать его в хук useStyles и передать пропу самостоятельно:

// @flow

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

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

export type Props = {
  className?: string,
  color?: string,
};

const TMPask = ({ color }: Props) => {
  const classes = useStyles({color})
  return <div
    className={classes.root}
  >
    hello
  </div>
};

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

export default TMPask;

Я не уверен, что делает ваш className, но я думаю, что его также можно удалить сейчас.

Более быстрый способ - прямой доступ к реквизиту, поскольку объект стиля также принимает функции для каждого значения. Это позволяет получить доступ ко всем реквизитам, переданным компоненту. И так как вы все равно передаете ему «цвет»:

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