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。

是否有一种简单的方法可以在自动建议的项目中使用主题颜色

1 个答案: