使用带有样式组件的 Javascript 变量

Posted

技术标签:

【中文标题】使用带有样式组件的 Javascript 变量【英文标题】:Using Javascript Variables with styled-components 【发布时间】:2017-09-16 02:25:54 【问题描述】:

我正在使用styled-components 来构建我的组件。所有接受自定义值的样式属性都在我的组件中重用(应该如此)。考虑到这一点,我想使用某种全局变量,以便更新将传播到所有组件,而无需单独更新每个样式。

类似这样的:

// Variables.js

var fontSizeMedium = 16px;

// Section.js

const Section = styled.section`
  font-size: $fontSizeMedium;
`;

// Button.js

const Button = styled.button`
  font-size: $fontSizeMedium;
`;

// Label.js

const Label = styled.span`
  font-size: $fontSizeMedium;
`;

我猜我的语法有误?此外,我知道在 javascript 领域不建议使用全局变量,但在设计领域中,跨组件重用样式是绝对必须的。这里有什么取舍?

【问题讨论】:

【参考方案1】:

我最终想通了,所以你可以这样做,至少在使用 React 时是这样。

您需要在一个文件中定义变量并导出它们。

// Variables.js

export const FONTSIZE_5 = '20px';

然后你需要将这些变量导入到每个组件文件中。

// Button.js

import * as palette from './Variables.js';

然后您可以像这样使用样式组件中的变量:

const Button = styled.button`
  font-size: $palette.FONTSIZE_5;
`;

【讨论】:

这不只是为了静态主题吗?使用此解决方案,您无法真正呈现对变量的更改。我会选择@Ricardinho 的答案,因为这允许您动态更新主题;通过一个实际的对象。 我同意在大多数情况下使用<ThemeProvider> 是最好的方法。在某些情况下(例如定义响应断点),静态变量似乎会有所帮助。但在大多数情况下,使用<ThemeProvider> 可以获得更多功能(例如,明暗模式切换、使用嵌套的ThemeProvider 自定义更深层次的元素等)【参考方案2】:

<ThemeProvider> 包裹在您的应用程序周围可能会有所帮助:

https://www.styled-components.com/docs/advanced#theming

const theme = 
  fontColour: 'purple'


render() 
  return (
    <ThemeProvider theme=theme>
      <MyApplication />
    </ThemeProvider>
  )

这将使所有子样式组件都可以访问主题,如下所示:

const MyApplication = styled.section`
  color: $props => props.theme.fontColour
`

或者

const MyFancyButton = styled.button`
  background: $props => props.theme.fontColour
`

或通过https://www.styled-components.com/docs/advanced#getting-the-theme-without-styled-components访问主题

【讨论】:

这应该是一个可以接受的答案。如果您想在样式化组件中使用类似 scss 的变量,那么您应该使用 theme 对象来保存您的所有全局设置并将其传递给 &lt;ThemeProvider&gt; 包装器。【参考方案3】:

您的最终解决方案有两个原因:

    仅在文件中声明一个变量并不会将其附加到整个应用的全局范围,因此除非导入其他文件,否则其他文件不知道它。 16px 不是有效值。它需要用引号括起来以使其成为字符串(就像您对'20px' 所做的那样),或者需要删除px

我遇到了类似的情况,除了我需要我的变量是数字而不是字符串,这也有效:

const CELL_SIZE = 12;
const ROWS = 7;
const CELL_GAP = 3;

const BannerGrid = styled.div`
  display: grid;
  grid-template-columns: repeat(auto-fit, $CELL_SIZEpx);
  grid-template-rows: repeat($ROWS, $CELL_SIZEpx);
  grid-column-gap: $CELL_GAPpx;
  grid-row-gap: $CELL_GAPpx;
  grid-auto-flow: column;
`;

【讨论】:

以上是关于使用带有样式组件的 Javascript 变量的主要内容,如果未能解决你的问题,请参考以下文章

带有样式组件的样式链接

无法使用带有样式组件的关键帧设置嵌套动画的样式

如何使用带有样式组件的逻辑类

使用带有样式组件的 ReactCSSTransitionGroup

如何在反应中使用带有样式组件的 document.getElementById()?

如何在 React 上正确使用带有样式组件画布的 TypeScript 类型