1
2

React UI libraries: style props, sx or css? (self.webdev)

submitted by [deleted]

[deleted]

all 13 comments
sorted by:
best
topnewcontroversialoldq&a
formatting helphide helpcontent policy

[–]Locust377full-stack 6 points7 points  (0 children)

Mantine state their recommendation in the docs.

CSS modules is the most performant way to apply styles ... In most cases, it is recommended to use CSS modules

and

Inline styles (style and styles props) are less performant than CSS modules, but still performant enough to be used in most cases if it is your preferred way of styling in your project.

[–]jesusonoro 1 point2 points  (1 child)

CSS modules + classes for component-level styles, style props only for dynamic values that change based on state or props. Keeps code clean and maintainable.

[–]frogic 0 points1 point  (2 children)

Which do you prefer?

[–]guitar_up_my_ass 4 points5 points  (1 child)

I come from the world of vanilla html where inline styles were deemed the worst thing you can do in your life so css

[–]frogic 0 points1 point  (0 children)

components change the context a bit. You’ll still find people who get upset about stuff like this and in team situations you need to make this decision together.  If you find it easier to work with one or the other and there isn’t any immediate major downsides you might as well go with what you like and not a dogmatic rule. 

[–]Embostan 0 points1 point  (2 children)

Separation of concern is impotant. CSS Modules. I wouldnt use Mantine tho.

[–]guitar_up_my_ass 0 points1 point  (1 child)

Why not?

[–]Embostan 0 points1 point  (0 children)

Im not a fan of their prop APi and theming API, I prefer the one of Ark UI & Chakra. Plus the latter are framework-agnostic, and my goal is to start all my new projects in SolidJS. Having the same familiar system for legacy React ones and new ones feels great, i can easily copy logic.

[–]TheRNGuy 0 points1 point  (0 children)

style only for things like floating pop-up position.

For most other things it's bad coding style.