Style ClassName in react - css

Question

I'm trying to make my first React Project for a school task.
I started to with npm install -g create-react-app then create-react-app my-app.
I added some html to the app and that works great in the browser. Now I have created a button.js file and a button.css file.
I can't see any changes that I do in the button.css file.
Is it something wrong on the code or do I need to add something more to get the css work?
src/App.js
import React, { Component } from "react";
import './App.css';
import Button from './components/Button';
class App extends Component {
render() {
return (
<div className="App">
<div className="calc-wrapper">
<div className="row">
<Button>7</Button>
<Button>8</Button>
<Button>9</Button>
<Button>/</Button>
</div>
</div>
);
}
}
export default App;
src/compontents/Button.js
import React, { Component } from "react";
import './Button.css';
class Button extends Component {
render() {
return (
<div className="button">
{this.props.children}
</div>
);
}
}
export default Button;
src/componentes/Button.css
.button {
display: flex;
height: 4em;
flex: 1;
justify-content: center;
align-items: center;
font-weight: lighter;
font-size: 1.4em;
background-color: #e0e1e6;
color:#888;
outline: 1px solid #888;
}

Answer 1

Since you used the lowercased button, it is interpreted as the normal <button> element instead of your <Button> component.
Your App.js should look like this.
import React, { Component } from "react";
import "./App.css";
import Button from "./components/Button";
class App extends Component {
render() {
return (
<div className="App">
<div className="calc-wrapper">
<div className="row">
<Button>7</Button>
<Button>8</Button>
<Button>9</Button>
<Button>/</Button>
</div>
</div>
</div>
);
}
}
export default App;