有没有一种简单的方法可以在 react-autosuggest 项目中使用主题颜色

Question

我正在尝试使用 react-autosuggest，因为它被设计为，对我来说，renderSuggestion 的方法签名应该包含实际的主题，所以我们可以在我们的主题中使用来自主题的变量造型

这是我的解决方法，但我只是想确保我没有做一些无用的复杂操作：

                                        <AutoSuggest
                                                renderSuggestion={createRenderSuggestion(this.props.classes)}
/>

变量 this.props.classes 在组件创建时填充

withStyles(styles)(ShopSuggestBox)

我必须在方法中定义一个方法才能访问实际的主题

const createRenderSuggestion = theme => suggestion => {
    console.log("setting css of name:", theme.itemName)
    return (
            <div>
                <div className={theme.itemName}>
                    {suggestion.name}
                </div>
                <div className={theme.itemInfo}>
                    NYC
                </div>
            </div>
    )
}

只是为了确保清楚：当我尝试在 function renderSuggestion(suggestion, { query, isHighlighted }) 方法中访问主题时，我不能

Answer 1

看看https://material-ui.com/customization/themes/#accessing-the-theme-in-a-component。

如果您不想作曲，也可以使用withStyles(styles, { withTheme: true })(ShopSuggestBox);。

无论哪种方式，theme 都可以在 ShopSuggestBox 的道具中访问。