In the process of developing a Next.js website, I've encountered a challenge:
I have 3 forms that function in similar ways but have different styles. Instead of duplicating code for each form, I'm looking for a way to build the form structure once and then style it differently without resorting to global CSS or inline styles.
My initial solution involves assigning a class to the form element and styling its children using traditional CSS. While this approach works, it feels out of place as the project primarily utilizes Styled-components. I'm seeking a solution that aligns with the principles of SC without relying on global styles.
This is what the current code setup looks like:
// form.js
export default Form = () => {
/* ... hooks and stuff ... */
return (
<form>
/* ... */
</form>
)
}
// styled-form-1.js
import Form from './Form.js'
export default Form = () => {
return (
<Form className="styled-1" />
)
}
// globalStyles.css
.styled-1 form { /* ... */ }
.styled-1 input { /* ... */ }
.styled-1 button { /* ... */ }
.styled-2 form { /* ... */ }
.styled-2 input { /* ... */ }
.styled-2 button { /* ... */ }
While the current solution is functional, I am eager to explore a Styled-components approach. I just haven't been able to find the right implementation yet.