有没有一种简单的方法可以在 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 的道具中访问。

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

is there an easy way to use theme colors in react-autosuggest items

material-ui

autosuggest