Javascript 为什么PropTypes不允许在scss属性中使用破折号？

我尝试将带有破折号（-）的PropTypes用于scss类名，如下示例：

scss

反应（盖茨比）

按钮组件：

import React, { Component } from "react"
import cx from "classnames"
import PropTypes from "prop-types"

import styles from "./styles.module.scss"

class Button extends Component {
  static propTypes = {
    onClick: PropTypes.func,
    children: PropTypes.node,
    variant: PropTypes.string,
    className: PropTypes.string,
    label: PropTypes.string,
    size: PropTypes.string,
    disabledClassName: PropTypes.string,
    disabled: PropTypes.bool,
  }

  static defaultProps = {
    className: "",
    label: "",
    size: "",
    variant: "",
    disabled: false,
    disabledClassName: "",
  }

  handleButtonClick = event => {
    const { onClick, disabled } = this.props

    if (disabled) return

    onClick &&
      onClick({
        event,
      })
  }

  renderChildren = () => {
    const { label, children } = this.props

    if (label) {
      return label
    }

    if (children) {
      return children
    }

    return "Button"
  }

  render() {
    const { className, size, variant, disabled, disabledClassName } = this.props

    const _className = cx(
      className,
      styles[size],
      styles.button,
      styles[variant],
      {
        [styles.disabled]: disabled,
        [disabledClassName]: disabled,
      }
    )

    return (
      <div onClick={this.handleButtonClick} className={_className}>
        {this.renderChildren()}
      </div>
    )
  }
}

export default Button

import React，{Component}来自“React”
从“类名称”导入cx
从“道具类型”导入道具类型
从“/styles.module.scss”导入样式
类按钮扩展组件{
静态类型={
onClick:PropTypes.func，
子项：PropTypes.node，
变量：PropTypes.string，
类名：PropTypes.string，
标签：PropTypes.string，
大小：PropTypes.string，
disabledClassName:PropTypes.string，
禁用：PropTypes.bool，
}
静态defaultProps={
类名：“”，
标签：“，
大小：“，
变体：“”，
残疾人士:错,，
disabledClassName:“”，
}
handleButtonClick=事件=>{
const{onClick，disabled}=this.props
如果（禁用）返回
onClick&&
onClick({
事件
})
}
renderChildren=（）=>{
const{label，children}=this.props
如果（标签）{
退货标签
}
if（儿童）{
返回儿童
}
返回“按钮”
}
render（）{
const{className，size，variant，disabled，disabledClassName}=this.props
常数_className=cx(
类名，
样式[大小]，
按钮，
样式[变体]，
{
[样式.已禁用]：已禁用，
[disabledClassName]：已禁用，
}
)
返回(
{this.renderChildren（）}
)
}
}
导出默认按钮

结果是：

纯白色按钮，没有任何样式； 有没有人能给我一些建议，看看是什么原因引起的？就在使用破折号的时候？顺便说一句，我尝试了PropTypes的每一个选项

<Button label="Default" variant="default" />
<Button label="Primary" variant="primary" />
<Button label="Success" variant="success" />
<Button label="Warning" variant="warning" />
<Button label="Danger" variant="danger" />
<Button label="Disabled" variant="disabled" />
<Button label="Default Outline" variant="default-outline" />

import React, { Component } from "react"
import cx from "classnames"
import PropTypes from "prop-types"

import styles from "./styles.module.scss"

class Button extends Component {
  static propTypes = {
    onClick: PropTypes.func,
    children: PropTypes.node,
    variant: PropTypes.string,
    className: PropTypes.string,
    label: PropTypes.string,
    size: PropTypes.string,
    disabledClassName: PropTypes.string,
    disabled: PropTypes.bool,
  }

  static defaultProps = {
    className: "",
    label: "",
    size: "",
    variant: "",
    disabled: false,
    disabledClassName: "",
  }

  handleButtonClick = event => {
    const { onClick, disabled } = this.props

    if (disabled) return

    onClick &&
      onClick({
        event,
      })
  }

  renderChildren = () => {
    const { label, children } = this.props

    if (label) {
      return label
    }

    if (children) {
      return children
    }

    return "Button"
  }

  render() {
    const { className, size, variant, disabled, disabledClassName } = this.props

    const _className = cx(
      className,
      styles[size],
      styles.button,
      styles[variant],
      {
        [styles.disabled]: disabled,
        [disabledClassName]: disabled,
      }
    )

    return (
      <div onClick={this.handleButtonClick} className={_className}>
        {this.renderChildren()}
      </div>
    )
  }
}

export default Button