React html 自定义样式

Posted 2023-02-22

【中文标题】React html 自定义样式

【英文标题】：React html customizable styling

【发布时间】：2021-08-05 16:56:47

【问题描述】：

他们是怎么做到的？我使用 React.JS 和 hooks 并设置了在线订购，但我希望做类似的事情，我可以根据餐厅设置 UI 样式。

您可以在之前的链接中看到，所有的在线订购布局都相似，但每个用户的 UI 都不同。

谢谢

【参考方案1】：

这些在我看来就像模板。您将需要某种管理界面，用户可以从中选择模板，以及品牌、徽标、网站菜单等信息。

想想像 WordPress 这样的东西，我们为我们的网站选择或安装一个主题，然后通过添加徽标、项目等来设置网站的其余部分。

因此，您肯定需要一个后端来将各个客户的这些值存储到数据库中。

您还需要将映射到每个模板的域名存储在某处。

【讨论】：

是的，我理解那部分。但是我如何让他们选择自定义所有内容，直到按钮的颜色和字体。我是否需要有人为每家餐厅注入不同的 CSS。我正在使用 react 和 hooks。

每个模板都有自己的 CSS，一旦他们为他们的网站选择了他们想要的模板，相应的 CSS 将与该模板一起加载。

【参考方案2】：

@vaibhavmande 的出色回答。事实上，我们就是这样做的。 （我是 mobi2go 的首席技术官）。这是另一个示例：https://ghostytoasty.mobi2go.com/。在基本级别上，您可以自定义主题和布局，但您也可以为每个品牌自定义 CSS。最重要的是，我们实际上有一个相当全面的 javascript 框架，因此可以将订单添加到购物篮中，而无需往返服务器。在一些复杂的情况下，我们也有自定义 javascript（这提供了强大的功能，但可能会让您面临某些错误）。使用https://www.cypress.io/ 进行的大量快照测试会有所帮助。我们是一家自豪的新西兰公司，但在澳大利亚、北美和欧洲设有办事处。我们也在招聘，所以如果你想亲身学习：https://mobi.bamboohr.com/jobs:)