javascript - React-如何避免这种内联样式

在我的功能组件的顶部，设置了这些值，这些值不仅在样式中使用，这让我感到困扰:

const testWidth = 100;
const testHeight = 100;

我在自己的样式中使用了其中一些变量...

我想将样式移动到另一个文件，该文件将保留此样式并与某些类名相关，例如'。 divWrapperStyle'，但我不确定如何与该变量'testWidth'进行交互

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

因此，我可以像这样在外部.scc文件中创建一个东西:

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

在导入该文件后，我可能会使用类似的内容:

 <div className="wrapper>

但是宽度呢？如何从testWidth变量中将该宽度包括在内...？

因此，在CSS中使用的变量对我来说是有问题的:/

怎么处理呢？

谢谢

最佳答案

为什么不简单地创建一个.JS文件，例如:style.js并执行以下操作:

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,
   }
}

然后在功能组件中对它进行import编码:

import styles from '{pathToStyle.jsFile}';

并使用它:

<div style={styles.divWrapperStyle}>

我认为这是最简单，最有效的方法。使用这种方法，您以后可以使所有内容动态化，而无需外部库。