Embarking on my first React project as part of a school assignment has been quite an adventure.
I kicked things off by running npm install -g create-react-app and then created my app with create-react-app my-app.
After adding some HTML to the application, everything worked seamlessly in the browser. Now, I've introduced a button.js file along with a button.css file.
Despite making changes to the button.css file, I'm not able to see any updates reflected. Could it be an issue with the code or am I missing something crucial for the CSS to take effect?
Here's a snippet from 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;
In 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;
The styles defined in src/components/Button.css are expected to apply to the buttons:
.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;
}