时间戳

首页 > 解决方案 > React - 如何避免这种内联样式

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

如何处理？

谢谢

标签： javascripthtmlcssreactjsinline-styles

解决方案

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

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

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

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

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

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

推荐阅读