My existing CSS code is structured like this:
.btn_1 {
color: #fff;
background: #004dda;
display: inline-block;
}
.btn_1:hover {
background-color: #FFC107;
color: #222 !important;
}
.btn_1.full-width {
display: block;
width: 100%;
}
I am looking to transition to using styled-components in React (CSS-in-JS).
Here is my progress with the migration:
.btn_1 {
color: #fff;
background: #004dda;
display: inline-block;
:hover {
background-color: #FFC107;
color: #222 !important;
}
}
However, I am unsure how to handle selectors like .btn_1.full-width in styled-components. Should I create a separate CSS block for that?
I had an idea to do something like this (or improve upon it):
.btn_1 {
${this}.full-width {
display: block;
width: 100%;
}
}
Despite searching through the documentation, I haven't found a solution yet. Do you have any insights on how to achieve this or if it's even a good approach?