Why are styles not being applied to the button in material ui?

Question

React

Good afternoon! Today I started to study material ui and already have a question. I took all the code that will be below from the documentation, changed it slightly.

const useStyles = makeStyles({
    root: {
        color: '#fff',
        backgroundColor: "#000",
        border: 0,
        borderRadius: 3,
        height: 48,
        padding: '0 30px',
    },
});

export default function Weather(props) {
    const classes = useStyles(props);

    return (<Button className={classes.root}>weather</Button>);
}

A lot of things are written in styles, but not all of them are displayed in the browser. Here's what happens:
What could be the problem?

PS I found the problem. The fact is that the styles of the material ui itself interrupt my styles. How can this be fixed?