className works just fine in the <div> below. But when I use it in Material UI Button, it doesn't work. I've been trying to figure it out for hours but I can't. Please help.

import React from 'react';
import Typography from '@mui/material/Typography';
import { Button } from '@mui/material';
import styles from "./portfolio.module.css";


const PortfolioPage: React.FC = () => {

    return (
        <div>
            <Typography variant="h1" component="h2" color="primary">
                Hey
            </Typography>

            <Button 
                variant="contained"
                className={styles["mui_button"]}
                >
                Kanazawa
            </Button>

            <div className="flex bg-purple-400 mt-10 text-white">
                Test className
            </div>
        </div>
    );
};

export default PortfolioPage;