javascript - react 主题样式

Question

我正在尝试将主题属性传递到我的组件中，因为我希望为我的按钮组件分配多种样式，并且我希望能够选择是否要使用具有主要类或主要白色的按钮类。

这是我的代码:

import React from "react";

import CSSModules from "react-css-modules";

import classNames from "classnames";

import styles from "./Button.module.sass";

export type ButtonTheme =
  | "primary"
  | "primary-white";

export interface ButtonProps {
  onClick: () => void;
  id?: string;
  disabled?: boolean;
  children?: React.ReactNode;
  theme?: ButtonTheme;
}

export const Button: React.SFC<ButtonProps> =
  CSSModules(styles)(
    ({
      theme = "primary",
      children,
      ...restProps
    }: ButtonProps) =>
      <button
        { ...restProps }
        styleName={
          classNames(
            "button",
            theme
          )
        }
      >
        { children }
      </button>
    );

我的 css 文件如下所示:

@import "~@assets/stylesheets/sass-variables"

$button-disabled-background-color: rgba($black, .1)

.button
  display: inline-block
  height: var(--button-height)
  padding: 0 15px
  font-family: "Open Sans", sans-serif
  font-size: 14px
  font-weight: 600
  white-space: nowrap
  cursor: pointer
  border: 0
  border-radius: 6px
  outline: none
  box-sizing: border-box

  &:not([disabled]):hover
    background-color: var(--color-action)

  &:disabled
    color: $button-disabled-color
    cursor: auto
    background-color: $button-disabled-background-color
.primary
  color: var(--color-white)
  background-color: var(--color-primary)
.primary-white
  color: var(--color-primary)
  background-color: var(--color-white)

我遇到了以下错误:

ReactElement styleName property defines multiple module names ("button primary").

如何将按钮和主类传递到我的组件中？

Answer 1

react-css-modules 默认情况下不允许多个模块名称，但可以配置这样做。

您需要将allowMultiple选项设置为true:

const options = { allowMultiple: true };

然后将选项以及您已经传递的样式传递给您的 CSSModules 函数。

请参阅此处的文档: https://github.com/gajus/react-css-modules#options