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

Question

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

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中使用的变量对我来说是有问题的：/

该如何处理？

谢谢

Answer 1

为什么不简单地创建一个.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}>

在我看来，这是最简单、最有效的方法。通过这种方法，您可以稍后使一切动态化，而无需外部库。