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