Expenses chart using React and Styled Components

Solution retrospective
Any feedback regarding best practices on React and Styled Components are very welcome. Also, you may notice that my styled components are redundant, especially on background-colors. Is there a way I can set bg color once, and not have to repeat for every single child elements? Thank you in advance!
Please log in to post a comment
Log in with GitHubCommunity feedback
- P@msunji
Hiya Ryan! Great job solving this challenge. It looks really well done.
About your background colours. I noticed that you had this in
index.css
:* { margin: 0; padding: 0; background-color: hsl(28, 62%, 91%); font-family: 'Overpass', sans-serif; }
The
*
selector selects all your elements, so it's added a cream background colour to all your elements. You'll want to remove thebackground-color
declaration from that block above and then instead, set yourbody
background colour to that colour (you can do this in yourindex.css
file). Once that's sorted, you should be able to remove all the redundantbackground-color
declarations in your child elements/components.Oh, and another thing. I noticed that you had CSS variables defined in
index.css
. You should be able to use this across your other components as well. It might be a little easier to set your colours this way instead of using thehsl()
values for each element.Hope this helped! Best of luck with other challenges! 👍
Marked as helpful
Join our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord