Inline Styles vs. CSS about react-d3

[esbullington]

I'm leaning toward inline styles, but with a little trepidation because it has the potential to disrupt the usual division of labor between designers and developers since inline styles can't be overridden in linked CSS stylesheets without !important. And so designers would have to either work directly in the jsx to style the charts or use what is considered a bad CSS practice.

That said, if I understand correctly, that's the approach Facebook's designers have been using in-house for a while now (and was one of the reasons for JSX to begin with).

And for many "normal" users, I think styling the charts inside the components might even be the preferred way of working (although this would depend on the individual, of course).

In my own React work, I'm typically using inline styles. It fits in well with my overall structure, which is to create a directory for each component organized like this:

MyComponent:
  view.js
  controllers.js
  models.js
  styles.js
  index.js 

The index.js is pointing to the view file, so I can just require the whole directory as a single component in Browserify. The styles.js is just a simple object -- it could just as easily be a JSON file.

So yes, I think inline styles are probably the way to go.

[jefffriesen]

I would lean towards passing in styles as props instead of through CSS. There's definitely more and more people doing it, including the React team: https://vimeo.com/116209150

[jefffriesen]

While I personally lean towards inline styles, I see the benefits of styling via CSS. d4 does a good job of adding classes to each of the elements. You can inspect the example charts and see how he did it.

I could see a hybrid approach for react-d3. You could attach the necessary classes as CSS hooks to the elements. Then you could pass in a prop that would disable the inline styles so any CSS could be respected. For example:
<LineChart data={lineData} width={400} height={200} title="Line Chart" enableCSS />
or
<LineChart data={lineData} width={400} height={200} title="Line Chart" disableInlineStyles />

Maybe this isn't the highest priority but I wanted to suggest a way to do both inline and css styling.

[esbullington]

So after lots of discussion with other devs and contributors, I agree that inline styles are the way to go, as long as we make sure to expose lots of class hooks for future designers to use for CSS styling (just as you point out is done in d4 -- a very cool project btw).

So I'm closing this issue: inline styles it is. Thanks for bringing it up for explicit discussion.