Hacker News new | ask | show | jobs
by player2121 2195 days ago
Please take a look at styled-system and proposed theme specification with variants. This is how you would expose your inner components for custom styling.

https://styled-system.com/variants

you can use it in Chakra or in anything else that supports this spec.
1 comments
shripadk 2195 days ago
Variants are not the same as having an API to override styles of inner components. You can use variants in Material UI too (which btw is inspired by styled-system and prior art): https://material-ui.com/system/basics/#variants

Variants are defined by the implementor of the component in question. What I am talking about is overriding styles by the user of the component. One way to do it is through the ThemeProvider. But that does so globally. If I want to override a style for a particular component only in one place (and the nested components within it) then I will have to use CSS nested selectors or a nested ThemeProvider (which is hacky and ends up slowing down the app depending on how it is implemented). Then I am tightly coupling the implementation with the presentation. There is no API as such to change the nested component styles directly. That is the area where I feel Material UI does better. It has standardized how inner components are exposed to the World for styling. That standardization should happen at the library level instead of at application level. So whenever you import the library you know you have that option available to you too.

link
player2121 2195 days ago
https://material-ui.com/system/basics/

It looks like Material UI has its own implementation of styled-system which is great! They should have started with something like that from the start :-)

link
player2121 2195 days ago
> What I am talking about is overriding styles by the user of the component.

Please take a look at theme spec where variants become part of your theme object. You use theme.js to provide custom variants to components. This is how you would let users to customize your components via well defined expressed API (typed with TS if you want) :-)

> One way to do it is through the ThemeProvider. But that does so globally.

You can have as many nested ThemeProviders as you want. This is not a hacky way but is the way if for some reason it's not enough for you to have 1 global theme object.

Material UI is great for what it does (implements said kind of design) but if material design is not what you want then using this library with its own layers of abstraction is a no go to me.

link