1

Is there a way to setup box-sizing by inlining it in React, instead of including it via CSS? is it recommended, or needed, or is there an alternative?

Here's a sample CSS snippet of what I mean:

body {
    margin: 0;
    padding: 0;
    font-family: 'Open Sans', sans-serif;
}

html {
   box-sizing: border-box;
}

*, *:before, *:after {
   box-sizing: inherit;
}

And by inlining I mean something like this: 

document.body.style.backgroundColor = "red";
foobar
  • 3,849
  • 8
  • 22
  • 32

2 Answers2

1

I think this is what you're asking...

Yes, all CSS properties use camel-case in JavaScript in place of dashes, so just like background-color becomes backgroundColor, box-sizing becomes boxSizing, and you could call:

document.body.style.boxSizing = 'inherit';

It seems like you may be asking about the best way to handle CSS with React, also, so you might want to check this out: https://github.com/css-modules/css-modules

EDIT: Really, I'd recommend against using the * in any context, but if instead of intending to apply this in the scope of a component, you're looking to apply it to the whole page, it's probably easier not to add it through JS. If you really had to and you didn't want to use CSSModules, I'm sure you could do something like: 

var allElements = [].slice.call(document.querySelectorAll('*'));
allElements.map(function(element) {
  element.style.boxSizing = 'inherit';
});

That said, this won't apply to pseudo-elements like :before and :after, because they're not actually part of the DOM: https://stackoverflow.com/a/5041526/1667063

Community
  • 1
  • 1
Benjamin Robinson
  • 378
  • 2
  • 7
  • I realize that I made my question a bit too vague, but partly on purpose - I'm still looking for the 'right' way to do things. I am already doing inlining with React components and I know the difference between CSS and 'react-css' syntax. The thing I'm struggling with right now, is configuring the overall layout correctly. That is getting the same result as I get with CSS border-box (see my code snippet above). document.body.style.boxSizing is a step in the right direction, but I still didn't get the whole thing to work yet. – foobar Apr 21 '17 at 10:35
  • So you're looking to apply 'box-sizing: inherit' to everything on the page? I guess I'd say, because the * selector is intended to target everything, DOM-wide, I'm not sure it makes sense to apply it through JS to begin with... If you're just looking to target the 'root' of your component, then I'd recommend looking further at CSS Modules. You can associate a scoped CSS file with your component, and I believe it would work to write a scoped style like: `.root *, .root *:before, .root *:after { box-sizing: inherit; }` which CSSModules would convert into JS for you. – Benjamin Robinson Apr 24 '17 at 16:07
  • Thank you so much Benjamin, I am starting to use CSSModules, this should do the trick. – foobar Apr 25 '17 at 20:32
0

To add inline style https://facebook.github.io/react/docs/dom-elements.html#style But CSS Modules https://github.com/gajus/react-css-modules is more suitable approach to style React components, because the style is applied locally.

Aksana Tolstoguzova
  • 369
  • 5
  • 13