I have been attempting to apply CSS styling in my app.js file, but for some reason, the color of the h1 heading "Todo Manager" is not changing as expected.
This is what my app.js file looks like:
import './App.css';
import Stylesheet from './MyComponents/Stylesheet';
const App = () => {
return (
<div className='App'>
<Stylesheet primary={true}/>
</div>
);
}
export default App;
Contents of myStyles.css file:
.primary {
color: 'orange';
}
.font-xl {
font-size: 72px;
}
Code snippet from Stylesheet.js file:
import React from 'react'
import "./myStyles.css"
function Stylesheet(props) {
let className = props.primary ? 'primary' : ''
return (
<div>
<h1 className={ `${className} font-xl` }>Todo Manager</h1><br /><br /><br />
</div>
)
}
export default Stylesheet