CSS não funciona no componente

Salve galera, estou montando uma pagina de login para treinar React, porém estou com problema quando vou adcionar CSS em um componente "Button". segue a baixo o codigo com o problema.

React

import style from './Style.module.css'
import InputText from '../InputText/InputText'
import Button from '../Button/Button'

export default function MenuLogin() {

    return(
        <div className={style.Menu}>
            <div>
                <p>Bem vindo de volta</p>
                <p>Fazer login com sua conta</p>
            </div>

            <InputText/>

            <div className={style.buttonLogin}>
                <Button className={style.x} texto={"Login com email"}/>

                <Button className={style.x} texto={"Login com o google"}/>
            </div>




        </div>
    )
}

CSS

.Menu{
    height: auto;
    width: 60%;
    padding: 1rem;

    margin: 20% auto;
    line-height: 12px;
}

.buttonLogin{

    display: block;

    margin-top: 1rem;
}


.x{
    display: block;
    background-color: green;
    color: white;
}

Eu coloquei o componente Button na pagina ai quando uso o CSS pela className{style.x} ele não reconhece.