Menu
There are detailed instructions on theming on the traditional Semantic UI, but the equivalent section is missing from the Semantic UI React site. Does that mean that it doesn't support theming or can you possibly use the traditional Semantic UI's approach to theming?
I know that some folks in the React world advocate for not using CSS and instead doing you styling programmatically as part of your component design. What's the Semantic UI React philosophy on that?
455
Option 1: Package Managerx require Semantic UI React >=0.81. 0. The Semantic UI CSS package is automatically synced with the main Semantic UI repository to provide a lightweight CSS only version of Semantic UI. If you are using TypeScript, you don't need to install anything, typings are included with the package.
To add a new packaged theme, simply extract the theme to src/themes/theme-name/ and adjust your semantic. config file to include reference to your new theme. For example, UI feed provides a "Timeline" theme out of the box, which significantly adjusts the appearance of a feed for chronological display.
To override say, the font color, all we have to do is write a selector that is more specific than this selector. We can achieve this by combining their two class selectors (equally specific) with a type selector (additional specificity).
The theming part is "missing" in the react semantic ui docs, but thats on purpose.
Thats the way I did it:
Install the full Semantic UI package. Semantic UI includes Gulp build tools so your project can preserve its own theme changes, allowing you to customise the style variables.
Detailed documentation on theming in Semantic UI is provided here.
$ npm install semantic-ui --save-devAfter building the project with Gulp, you'll need to include the minified CSS file in your index.js file:
import '../semantic/dist/semantic.min.css';
via: https://react.semantic-ui.com/usage#semantic-ui-package
There are already different ui-frameworks with a more "react" approach. IMHO what semantic ui (react) does is the best real-live solution so far...
84
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
