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

Answer 1

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.