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

【问题标题】：React - How to avoid this kind of inline stylingReact - 如何避免这种内联样式
【发布时间】：2019-09-21 17:25:54
【问题描述】：

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

const testWidth = 100;
const testHeight = 100;

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

我想将我的样式移动到另一个文件，该文件将保存此样式并与某些类名相关，例如“.divWrapperStyle”，但我不确定如何与此变量“@987654324”交互@'

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

如何处理？

谢谢

【问题讨论】：

我读过一些文章，声称允许您在 javascript 中使用 css / scss 中的变量，但我没有成功：til.hashrocket.com/posts/…
除了你的问题，width:auto 会覆盖你之前为 width 设置的变量；)
查看我的回答，看看您是否喜欢我解决问题的方法。

标签： javascript html css reactjs inline-styles

【解决方案1】：

styled-components 库可能会给你想要的东西。

要使用传统 CSS 实现这一点，我的建议是将您的想法从“如何将任意数值传递给我的 css？”，而不是“我想要支持的样式变化是什么？” .

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

对于第二种方法，您可以使用媒体查询进行尺寸计算（移动设备与平板电脑），并使用诸如 clsx 之类的库进行 JavaScript 真值计算，以生成传达您需要支持的变体的类名你的 CSS。

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

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

【讨论】：

【解决方案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}>

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

【讨论】：

【解决方案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`}}>

【讨论】：