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属性定义了多个模块名称（＆＃34;按钮primary＆＃34;）。

如何将按钮和主要类传递给我的组件？

Answer 1

react-css-modules默认情况下不允许多个模块名称，但可以配置为执行此操作。

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

const options = { allowMultiple: true };

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

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

反应主题样式

1 个答案: