假设我们有一个使用 react-bootstrap 开发的 react Web 应用程序。此应用程序必须使用颜色选择器进行自定义。用户选择基色，并在整个 Web 应用程序 GUI 中采用具有多种自动选择辅助颜色的配色方案。
记住 react-way 是为每个单独的组件使用内联样式，我想知道如何在 react-bootstrap 中做到这一点？
【问题讨论】：
标签： reactjs react-jsx jsx react-bootstrap
如果你想让你的应用 themable 你可能需要：
作为一个工具，你可以试试这个storybook-addon-material-ui（尽管标题中存在 Material-UI，但它允许为所有目的创建主题对象）
然后，您可以使用react-theme-provider 为您的应用提供主题。它只是通过上下文将主题数据传递到您的Components，因此您可以实现任何框架或在需要时手动设置颜色。它还有一个用于主题切换的 API。
【讨论】：
您可能想查看React CSS Modules，这将允许您使用动态样式对象。该代码可以轻松阅读并且可以正常运行。然而，这需要有预定义的主题。
第二种方法是在 redux 存储或相邻组件中定义颜色，将其作为 prop 传递给它的所有子组件。
但是我建议不要让用户使用自定义颜色选择器选择任何颜色。如果您让用户选择 RGB 的颜色，请记住有 16777216 种颜色组合。您不能通过使任何给定颜色变暗来轻松制作替代颜色，因为很有可能只改变例如颜色。降低亮度可能会降低与辅助颜色的对比度。
【讨论】：