I have question about the correctness of using styled components or another type of css styling in react
I prefer to use styled components in my projects. I agree that ionic components have many functionality out the box that help me work with native platform correctly
but for example ion-text is unusful for me bacous it havent got support for font-size, font-weight in variables.css
so i prefer to create my custom TextComponent by styled components lib.
and there are many cases in my project when cofmortable for me to use styled-components instead ionic components
so… the question
does use styled-components effect on my project? Are there some problems of ussing styled-components instead ionic components
or it will do no effects on my projects and there is no reason to use only ionic components for my UI?
Good question! There are opinions both ways. I personally only use the functional Ionic components in order to get the native feel. Components like ion-alert, ion-input, ion-button, ion-modal, ion-card, ion-item, etc. I then use Tailwind CSS to style my app for its own look & feel.
I’ve also created my own component wrappers around ion-input, ion-select, and ion-textarea so I can reuse my own custom styling.
One of the major benefits of Ionic is the included components.
Before you replace them with something else, I would encourage you to make sure that you learn how to use and customize the components-- it’s quite possible that what you want can already be done in Ionic if you learn a bit more.
There’s nothing wrong with integrating other components, but this will create more maintenance work for you over the long term.
For example, I wanted to let users select the text size throughout the entire app; I let users choose normal/big/bigger/biggest, and then the app updates and resizes the font for all components. This is not something built into Ionic, but I was able to add it with just a few dozen lines of code: Variable font size in Ionic react · GitHub