CSS class name changes compiled by Webpack in React cannot be referenced

intends to use className to refer to the class name in 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);
}

you can see the compiled css: through the console of the chrome browser

.button__button1-172qT {
  background: -sharpeb1010; }

.button__button2-1tvBf {
  background: -sharp17d811; }

.button__button3-q4dzw {
  background: -sharp0d51cf; }

The class names of

css have been changed, so you can"t refer to className .classon1 directly in function Button. I know you can solve this problem if you use css module, but can you now use the class name button1 directly without using it in className?