打算使用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可以解决这个问题，但是现在可以不使用在 className之中直接使用 button1这个类名么？