reactjs - Semantic-ui-react theming to customise components background colour does not work

Question

I'm trying to customise the semantic-ui components for a react-js project to change colour of a login button to be a hex colour code that I need (not the semantic-ui default colour). I followed with the guide on their main website https://react.semantic-ui.com/theming/

I followed the same way this guide instructed. However, the components that I used to import from semantic-ui-react stopped having semantic-ui style,

import { Button, Form, Grid, Header, Icon, Image, Message, Segment } from 'semantic-ui-react';
...

 <Button icon floated='right' labelPosition='right' color='red' type='submit' disabled={submitting} loading={submitting}>
                                            Login
                                                <Icon name='sign in'/>
...

I'm relatively new to semantic-ui and react-js but I have looked at all places and they explained in different ways or there methods don't work for me.

Edit:

Actually even though I tried to run npm run craco build, it still didn't really override the variables / elements such as buttons, left navigation bar so the only way I worked around this was to actually override the CSS element directly. Still looking for the theming solution though

Answer 1

等待大神答复