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

styled-components库可能会为您提供所需的内容。

要使用传统CSS做到这一点，我的建议是将您的思维从“如何将任意数值传递给CSS？”转变为“我要支持哪些样式变化？”

在这里，您可能有wrapper--mobile，wrapper--tablet，wrapper--desktop，或者只是一个类似wrapper--wide变体的修改。（我在这里使用BEM表示法。）

对于第二种方法，您可以使用媒体查询来进行尺寸计算（移动设备还是平板电脑），并使用clsx之类的库对JavaScript进行真实计算，以生成一个类名，该类名可以传达您需要CSS中的支持。

根据您的浏览器堆栈，您可以使用css variables。不过，思考的过程不是“如何传递任意数值”，而是“如何在一个地方声明需要支持的一组变量，以便只需要在一个地方进行更改”以便将来进行调整”。

让我知道这些选项是否使您更接近想要的东西。

Answer 2

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

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

Answer 3

我认为您不需要其他图书馆。如果要重用样式，可以将其移到另一个文件中，然后将其作为常量导入，并为其中的值设置默认值。

然后，如果您需要更新或更改其中一个属性，则可以使用新值将其传播：

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

像这样使用它：

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

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

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

3 个答案: