Idea: Styles that are confined to the component

[AlastairTaft]

I'm trying to find a styling package that allows me to keep the css within the component, i.e. I can do everything I need without needing a higher order component or to add anything outside of my component. Inline styles is the simplest option, but then that has a lot of drawbacks.

Material-ui is a great example of this, currently they are trying to come up with a solution to style their components that doesn't force the parent libraries to adopt a specific approach. Your redux-like approach would require me to have a Provider in the main project if I were to include a third party library written in fela, which doesn't seem good to me as it tightly couples the two.

I think they are going with jss. Because it's simple, you can just do the following to put the styles in the document without moving outside the scope of the component.

e.g.

const sheet = jss.createStyleSheet({
  ...
}).attach()

With your render to node api, I think I could write some helper code to do something similar to the JSS api and automatically attach the styles to the head of the document if in a browser environment. So I guess what I'm asking is can I do this without needing a Provider element and without having to leave the scope of my third party component? is the purpose of a Provider only for server side rendering? Which I'm not worried about.

[robinweser]

Well, the Provider is nothing you need to use. It just helps to access the renderer within every Component. You could also have e.g. a singleton renderer which gets imported every time to render your stuff.
You could also use Fela.render(renderer, mountNode) separately to address multiple component based stylesheets.

You could do sth. like this:

import React from 'react'
import { createRenderer, render } from 'fela'

const renderer = createRenderer()
// you could also generate a new stylesheet with a simple helper for every component
render(renderer, document.getElementById('stylesheet'))

const rule = props => ({
  // ...
})

const Button = props => (
  <div className={renderer.renderRule(rule, { /* props */ })>
    // ...
  </div>
)

export default Button

This does not require any kind of Provider/connector and is bound to the Component. Therefore it can be used within any application without additional setup.

[AlastairTaft]

Nice! Thanks.

[robinweser]

Guess I can close this one?

[AlastairTaft]

Sure