Gatsby 组件道具 CSS 模块

Question

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

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

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

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

在我的布局中，我这样调用页眉组件，因此页眉将使用特定的 css 作为顶部呈现。我知道我可以在没有 CSS 模块的情况下轻松做到这一点，但这不是重点。

<Header position="top" />

有什么帮助或建议吗？

Answer 1

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

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

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

Gatsby Component Props CSS Module