Lets start and say CSS is an endless world of styling.
There is a serious amount of options that you can play with to get the styling that you want for your component/element,
I am not going to tell you about everything but I will tell you about the struggle that I had in my last project and how I managed to find the solution for it.
Name the class
I had a lot of struggle grabbing the specific element using the CSS file in my project so what do you see now is the final result of endless tryouts of naming the right element.
(I know using ID for the elements can be more specific but with React I find it easier with classNames).
Don’t think i did all this styling by myself, Google was a good friend and there was a lot of coping and pasting.
Devtools
I think the most fun part with CSS is that you can play with the DOM without changing your code and have all experiments that you want until you have the final product and just copy and past it in your VScode.
hover & active
The big struggle that I had in my project (with styling) was that the button component that I was using from "MaterialUI"
was refusing to work with my simple onChange event,
So I decided to create the button on my own and do all the styling by myself.
I discovered how fun it can be with the "hover" & "active" selectors!
I managed to create a really nice Remove button that his color is fading and it has a click effect when you click it.
No doubt that i copied and paste a lot of it but there was a lot of playing around with it and i am very happy with the final result :)
resources
https://www.w3schools.com/css/css3_buttons.asp
https://www.w3schools.com/csSref/sel_hover.asp
Top comments (0)