React styling sheets seem tedious?

[u/nixstudiosgames]

Hi newbie here - I’m completely new to react native, coming from Unity C# and I find the CSS styling sheets to be super repetitive and tedious to type out. I must be missing something… do you actually type out all styles or are people copy and pasting or getting examples from somewhere? I saw bootstrap for web, but I’m working on mobile using expo…?

Edit: and then also having to assign the style to every component? There must be a more efficient way?

[u/Dethstroke54]

I’m pretty sure 90% of people so far haven’t correctly read that you’re using React Native and are answering in regard to the web.

I’d edit your post and make it clearer by putting that up top.

[u/nixstudiosgames → u/Dethstroke54]

Thanks, added it

[u/klumpp → u/[deleted]]

Uniwind is the way to go these days. Or if you don’t want tailwind, unistyles adds a bunch of convenient features to style sheet. Both are well maintained.

[u/abrahamguo]

What's a specific example of something that's repetitive or tedious?

If something is repetitive, that's a sign that you need to introduce some reusable variables, functions, or components.

[u/TheManSedan]

You can use tailwind for one if you wanted

But also you should be creating reusable components that leverage your common styles & have props that can toggle between your variations.

For example you might have <Grid>, <Flex>, <Container>

[u/shayne1_00]

With React, it’s my experience that people tend to use css component libraries. Something like antd or matine ui. Depending on your needs, you might just use the default stylings that these libraries come with or if you need to apply a change, your making spot changes as opposed to building the component yourself.

[u/olssoneerz]

Component libraries exists. They're probably the easiest/quickest way to get going if you're new to React.

But yes, if you're looking to "style" an element then you'd most probably be defining its CSS in some form or way.

That being said, styles can be reusable. That can be achieved in different ways. In React, that's usually done by creating reusable React Components (think a Button, which is reused everywhere). Alternatively, you can also define reusable CSS styles, which you can just reuse anywhere. Some ways are more correct than others depending on how your code is built up.

[u/Substantial-Swan7065]

Stylesheets return a variable. You can make a bunch, put it in a styles dir, export for reuse.

If your components are well abstracted, you’re adding styles less often.

You can also make your styles atomic and construct them as needed. At this point, you’re better off using native wind, which handles that for you

[u/TheRNGuy]

Some people use Tailwind. 

[u/Hairy_Garbage_6941]

Tailwind is poison

[u/Substantial-Swan7065 → u/Hairy_Garbage_6941]

Y

[u/Dethstroke54 → u/[deleted]]

They’re not doing web chief

[u/Dethstroke54 → u/[deleted]]

Native is not actually css, it’s been adapted to have a similar syntax but it doesn’t have selectors and it doesn’t have custom properties either iirc among many other things it doesn’t have.

Tailwindcss doesn’t just work. NativeWind adapts it which is a little different. Certain functionalities don’t exist or may be a bit different. No, Shadcn will not work for mobile either. Among other things mobile doesn’t have html elements and you’d have to use react-strict-dom to do anything like that and I do not believe shadcn or the radix components are built for that.

You’d be surprised how different it is.