如何在 Semantic-UI-React（不是 Semantic-UI）中自定义主题？
[英]How to customize theme in Semantic-UI-React (not Semantic-UI)?
问题描述
I am trying to customize the theme when using Semantic-UI-React, there are detailed instructions on how to customize themes in Semantic-UI, like we can override variables to change their styles.
我正在尝试在使用 Semantic-UI-React 时自定义主题，有关于如何在 Semantic-UI 中自定义主题的详细说明，例如我们可以覆盖变量以更改其样式。
But I didn't find any way to customize themes with Semantic-UI-React, since there is no semantic/src/themes and semantic/src/site folders for us to make changes, what comes with Semantic-UI-React is just the default CSS file (the file we import in our index.js file "semantic-ui-css/semantic.min.css").但是我没有找到任何使用 Semantic-UI-React 自定义主题的方法，因为没有 Semantic/src/themes 和 Semantic/src/site 文件夹供我们进行更改，Semantic-UI-React 附带的只是默认 CSS 文件（我们在 index.js 文件“semantic-ui-css/semantic.min.css”中导入的文件）。
Is there any way we can customize the theme in Semantic-UI-React?有什么方法可以自定义 Semantic-UI-React 中的主题吗？ Thanks in advance!提前致谢！
2 个解决方案
解决方案1
1 2020-10-01 16:42:42
This link may also help in addition to the theming page on the docs site.除了文档站点上的主题页面之外，此链接也可能有所帮助。
https://jsramblings.com/how-to-use-semantic-ui-with-a-custom-theme-in-your-cra-app/ https://jsramblings.com/how-to-use-semantic-ui-with-a-custom-theme-in-your-cra-app/
It has a setup script after you run运行后它有一个设置脚本
npm install --save-dev semantic-ui
解决方案2
0 2021-11-14 23:34:27
Yes there is a way to customize themes and create your own https://react.semantic-ui.com/theming/是的，有一种方法可以自定义主题并创建自己的https://react.semantic-ui.com/theming/
Basically just follow instructions from the docs link, install semantic-ui-less, which are not compiled Less files for the Semantic-ui CSS, craco-less which is just a path plugin for CRA configured Webpack so your Less compiler can find files properly without ejecting your CRA, move the files to created folder, modify theme.config, start app and you are ready to customize your own theme, although I didn't find some kind of API for variables on Semantic-ui docs, so I had to browse semantic-ui-less package files for them.基本上只需按照文档链接中的说明安装semantic-ui-less，它们不是为Semantic-ui CSS编译的Less文件，craco-less它只是CRA配置的Webpack的路径插件，因此您的Less编译器可以正确找到文件无需弹出您的 CRA，将文件移动到创建的文件夹，修改 theme.config，启动应用程序，您就可以自定义您自己的主题了，尽管我没有在 Semantic-ui 文档中找到某种用于变量的 API，所以我有为它们浏览无语义 ui 的包文件。
One problem I encountered was that I tried changing the theme for all components in theme.config and it was throwing errors about missing fonts and variables.我遇到的一个问题是，我尝试更改 theme.config 中所有组件的主题，但它抛出有关缺少字体和变量的错误。 Don't do this, it's not gonna work, check the Semantic-ui docs about theming, there is a note about it不要这样做，这是行不通的，请查看有关主题的 Semantic-ui 文档，有关于它的说明
Themes are per component, so although, for example, material themes are available for menu, button, and site, changing all values to "material" will produce an error for components which are not included in that theme.
https://semantic-ui.com/usage/theming.html#browsing-for-themes https://semantic-ui.com/usage/theming.html#browsing-for-themes
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.