'Is it possible to create a React Styled Component that has a predetermined structure with the option to set the element dynamically?
I have been working a lot with styled components in React recently. In the beginning I created a component for each element, so for example a file called "Button.tsx". In this case, this file would return a styled button.
I have noticed lately that creating a styled component can be time consuming and it also becomes a lot of "unecessary" code according to me.
It would have been awesome if it was possible to create one file called "Component.tsx" instead that returns a styled component. This would save a lot of time and would also make one file look messy instead of a bunch of files. I have tried this and it works just like i want to (almost).
The problem I am having right now is that the styled component gets rerendered by React since it is called inside of a function. An easy fix would be to just move the styled component outside of the function but that way it wont keep track of the argument that is passed in which is necessary for the styled component to know which element it should render. I don't know. Would this be possible? I'll attach a/some screenshot/screenshots. Reusable styled component
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|