在React之中 經(jīng)過Webpack編譯的CSS類名改變 無法被引用

打算使用className來引用css之中的類名

react.js：

import '../styles/button.scss'

function Button(props) {
    console.log(props.className)
    return (
        <div>
            <button className={props.className}>{props.text}</button>
        </div>
    )
}

export default function Buttons() {
    return (
        <div>
            <Button className="button1" text="btn1" />
            <Button className="button2" text="btn2" />
            <Button className="button3" text="btn3" />
        </div>
    )
}

button.scss:

.button1 {
    background: rgb(235, 16, 16);
}

.button2 {
    background: rgb(23, 216, 17);
}

.button3 {
    background: rgb(13, 81, 207);
}

通過chrome瀏覽器的控制臺可以看見編譯之后的css：

.button__button1-172qT {
  background: #eb1010; }

.button__button2-1tvBf {
  background: #17d811; }

.button__button3-q4dzw {
  background: #0d51cf; }

css的類名都被改變了，所以在 function Button之中無法直接引用className .button1，我知道如果使用css module可以解決這個問題，但是現(xiàn)在可以不使用在 className之中直接使用 button1這個類名么？