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

Question

在我的功能组件的顶部，设置了这些值，这些值不仅在样式中使用，这就是困扰我的地方：

const testWidth = 100;
const testHeight = 100;

我在我的风格中使用了其中一些变量...

我想将我的样式移动到另一个文件，该文件将保存此样式并与某些 class 名称相关，例如“.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 实现这一点，我的建议是将您的想法从 "how do I pass arbitrary numerical values to my css?" 转移到 "what are the style variations that I want to support?"。

在这里您可能有 wrapper--mobile、wrapper--tablet、wrapper--desktop，或者可能只是一个单一的修改，如 wrapper--wide 变体。（我在这里使用 BEM 符号。）

对于第二种方法，您可以使用媒体查询进行尺寸计算（移动设备与平板电脑），并且您的 JavaScript 真实计算使用 clsx 之类的库生成 class 传达您需要在 CSS.

中支持的变体的名称

根据您的浏览器堆栈，您可能会使用 css variables。不过，思考过程不是 "how do I pass arbitrary numerical values"，而是 "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"。

如果这些选项能让您更接近您想要的东西，请告诉我。

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 - 如何避免这种内联样式

React - How to avoid this kind of inline styling

html

javascript

css

inline-styles

reactjs