Why PropTypes not allowing to use dashes into a scss property?

I'm trying to use PropTypes with dashes (-) into a scss classname like this example:

scss

.default-outline {
  background-color: $snow-01;
  border-color: $polar-night-01;
  color: $polar-night-04;
  border: 1px solid;
}

React (Gatsby)

<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" />

Button component:

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

The result is:

Just plain white button without any styles; Does anyone can give me some advice on what may causing it? Just when using dashes? I tried every single option on PropTypes typecheck by the way.