React - How to avoid this kind of inline styling

Question

At the top of my functional component, these values are set which are not used only in styles, and that's what's bothering me:

const testWidth = 100;
const testHeight = 100;

I use some of those variables in my styles...

I would like to move my styles to another file which would hold this styling and would be related with some class name for example '.divWrapperStyle' but I'm not sure how can I interact with this variable 'testWidth'

<div
style={{
  borderBottom: 0,
  width: `${testWidth}px`,
  width: 'auto',
  paddingRight: 0,
  paddingLeft: 0,
  paddingTop: 20,
}}
>

So I could create a something in external .scc file like this:

.wrapper{
    borderBottom: 0,
    paddingRight: 0,
    paddingLeft: 0,
    paddingTop: 20,
 }

And I might use something like this after importing that file:

 <div className="wrapper>

but what about width? How could I include width with that value from testWidth variable...?

So that variables which are used in CSS are problematic for me :/

How to deal with this?

Thanks

I've read some articles that claim to allow you to use variables from your css / scss in javascript, however I have had no luck making it work: https://til.hashrocket.com/posts/sxbrscjuqu-share-scss-variables-with-javascript — random_user_name, Sep 21 '19 at 17:27
aside your question, width:auto overwrites your earlier variable set for width ;) — G-Cyrillus, Sep 21 '19 at 17:35
Check my answer to see if you like my approach to your problem. — mindmaster, Sep 21 '19 at 17:47

Reed Dunkle · Answer 1 · 2019-09-21T17:39:36.203

The styled-components library will probably get you what you're wanting.

To accomplish this with traditional CSS, my recommendation would be to shift your thinking away from "how do I pass arbitrary numerical values to my css?", instead to, "what are the style variations that I want to support?".

Here you might have wrapper--mobile, wrapper--tablet, wrapper--desktop, or maybe just a single modification like a wrapper--wide variant. (I'm using the BEM notation here.)

For this second approach, you can use media queries for the dimensions calculations (mobile vs tablet), and your JavaScript truthy-calculations using a library like clsx to generate a class name that conveys the variant you need to support in your CSS.

Depending on your browser stack, you could possibly use the css variables. Still, the thought process is not "how do I pass arbitrary numerical values", but rather, "how do I declare the set of variations that I need to support in a single place so that I only need to make that change in one place to make adjustments in the future".

Let me know if these options get you closer to what you're wanting.

score 1 · Accepted Answer · answered Sep 21 '19 at 17:40

Why don't you simply create a .JS file, for example: style.js and do the following:

const testWidth = 100;
const testHeight = 100;

export default const styles = {
   divWrapperStyle: {
     borderBottom: 0,
     width: testWidth, // use your variable here
     width: 'auto',
     paddingRight: 0,
     paddingLeft: 0,
     paddingTop: 20,
   }
}

and then in your functional component you import it doing:

import styles from '{pathToStyle.jsFile}';

and use it:

<div style={styles.divWrapperStyle}>

This is the most easy and efficient way of doing it in my opinion. With this approach you can make everything dynamic later and no need of external libraries.

score 0 · Answer 3 · answered Sep 21 '19 at 17:55

I don't think you need another library. If you want to reuse the style I'd move it out to a different file and import it as a constant, with default values set for values you might need to vary.

Then if your needed to update or vary one of the properties you can just spread it in with your new value:

// my-styles.js
export default myStyle = {
  borderBottom: 0,
  width: `10px`,
  width: 'auto',
  paddingRight: 0,
  paddingLeft: 0,
  paddingTop: 20,
}

Use it like this :

// My Component.js
import {myStyle} from ... 

<div style={{...myStyle, width: `${testWidth}px`}}>

React - How to avoid this kind of inline styling

3 Answers3