Gatsby 组件道具 CSS 模块答案

【问题标题】：Gatsby Component Props CSS ModuleGatsby 组件道具 CSS 模块
【发布时间】：2018-03-01 12:59:24
【问题描述】：

我正在尝试将道具用作样式中的类，使用 Gatsby CSS 模块

import styles from './header.module.sass'

const Header = props => (
    <header className={styles + props.position}>

我知道这段代码不起作用，它只是向您展示我想要实现的目标。

在我的布局中，我像这样调用 header 组件，因此 header 将使用特定的 css for top 呈现。我知道没有 CSS 模块我可以轻松做到这一点，但这不是重点。

<Header position="top" />

有什么帮助或建议吗？

【问题讨论】：

【解决方案1】：

如果 props.position = 'top' 并且你想通过 props 设置 className={styles.top}，你可以这样做：

import styles from './header.module.sass'

const Header = props => (
<header className={styles[props.position]}>

【讨论】：