Styled Components is a CSS in JS library. It generates classes from your CSS and inject them into components. This is much more complicated than adding a `<style />` tag in your component!
The core premise for CSS in JS is solved by backticked strings in style tags as shown above.
The backticked string style tag shown above already solves all the issues with CSS limitations in reactjs.
Here’s what the article you linked to says:
“Why does this matter?
Not all CSS features can be aliased with JavaScript event handlers , many pseudo selectors (like :disabled, :before, :nth-child) aren’t possible, styling the html and body tags isn’t supported etc.
With CSS-in-JS, you have all the power of CSS at your fingertips. Since actual CSS is generated, you can use every media query and pseudo selector you can think of. Some libraries (like jss, styled-components) even add support for neat, non-CSS-native features like nesting!”
All addressed by backticked strings in style tags.
The core premise for CSS in JS is to work around CSS's global namespace. It means you can write styles for a component using a 'local namespace' and have to worry a lot less about accidentally affecting the styles of other parts of your site. Every other language has scoping, so why can't CSS?
This is especially helpful as your site and team scales - you don't need to worry as much about stepping on other people's toes, nor do you need to be as aware of the entire (styling) scope of your website. When you do share/cascade/compose/extend styles, it makes it a lot more explicit in the way you do it.
It's basically taking a concept like BEM and baking it into the language, reducing the mental overhead.
Just stop being so confrontational. Styled-components enable you to use SASS, not having have to invent any classNames or worry about them conflicting, enables you to easily extend those styles and gives you the ability to mix code with your styles in kinda effortless way. Okay granted that mixing code is not as clean as I'd like it to be but still I haven't found a better option
You name a class ".button" and it will conflict with completely unrelated component's style tags which also have a class named ".button". You don't have this problem with CSS-in-JS. You isolate the styles completely.
Smooth UI is not better than other libraries like Material UI or Ant UI but the focus is different. Smooth UI put the focus on developer experience, extending a style is very simple. Also it exposes some classes, you don't have to learn any API to extend components, you can simply inspect components and use the classes!
Looks like the example uses that because it would otherwise be overridden by the variant=primary (which seems to be the default) so explicitly overriding that variant would probably be more intuitive and not require the !important hack.
In fact, components like Radios and Checkboxes are very complex to create. So we use Smooth UI as a base, but it is intentionally very light (no big components).
About TypeScript, I am sorry, I am not a TypeScript user. TypeScript support would be awesome but I need some help on this!
The real game changer in Smooth UI is the way to extend components. This is a CodeSandbox example, feel free to play with it! https://codesandbox.io/s/7k8o4x7lj6
