Gatsby组件支持CSS模块

Question

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

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

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

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

在我的布局中，我像这样调用标题组件，因此标题将使用特定的css为top进行渲染。我知道我可以在没有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]}>