Reagieren Thema Stile

Question

Ich versuche, Thema Prop in meiner Komponente zu übergeben, weil ich meine Knopfkomponente mehrere Stile zugeordnet haben möchte und ich möchte die Möglichkeit haben, zu wählen, wenn ich Button mit primären Klasse oder verwenden möchte Primär-Weiß-Klasse.

Hier ist mein Code:

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> 
    ); 

Und meine CSS-Datei sieht wie folgt aus:

@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) 

ich folgende Fehler aufgetreten:

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

Wie kann ich Taste passieren und Primärklasse in meine Komponente?

Answer 1

react-css-modules erlaubt standardmäßig nicht mehrere Modulnamen, kann aber dafür konfiguriert werden.

Sie werden die allowMultiple Option auf true gesetzt müssen:

const options = { allowMultiple: true }; 

Und dann passieren Optionen auf Ihre CSSModules Funktion, zusammen mit den Stilen, die Sie bereits vorbei.

Siehe Dokumentation hier: https://github.com/gajus/react-css-modules#options