Color change in Semantic UI React

Hi everyone,

I was wondering to use Semantic UI for my next demo react project. I installed the Semantic UI from npm, but I have a small problem.

I want to change the primary color of the UI from blue to different color, but unable to get any idea of doing it. Followed, the semantic UI docs, but unable to implement it. Any help regarding this will really be helpful.

Thank you

Can you be a little more specific than “unable to implement it”? What’s the issue, what have you tried, …?

I suppose you’ve seen this page in the docs? It has a section “Using Themes”, about how to define your own default values for certain elements by modifying the site.variables file:

https://semantic-ui.com/usage/theming.html

Hi @jsdisco ,

Thank you for your quick reply. I have tried to implement it in react, following is the link that I have referred:

React Semantic UI

And I tried to understand that craco part but unable to do it. Can you please look into the link once.

And, please let me know if there is any other way around for doing this but in a standard way. It will really be a great help.

Not sure if I can help much, I’ve never used Semantic UI. If I wanted to change the primary colour, I’d look into the documentation and follow the steps described. If you say you’re “unable to do it”, I don’t really know how to troubleshoot anything, I have no idea what are you unable to do.

Thank you for your response @jsdisco . I think, I will go for inline styles then.

Hey, there is another problem, if you can see it then it will be a great help.

So, I am making a custom modal. Following is the code:

In the main Component:

const [modalOpen, setModalOpen] = useState(false);

<button onClick={e => setModalOpen(true)}>Open Modal</button>

<Modal open={modalOpen} setOpen={e => setModalOpen(false)}>
<p> Hi, I am Modal </p>
</Modal>

In the modal Component:

import {v4 as uuidv4} from 'uuid';

function Modal({children, open, setOpen}) {
if (!open) return null

const modalContainer = document.createElement('div')
modalContainer.id = `${Modal_uuidv4()}`
document.body.appendChild(modalContainer)

return (
<>
{children}
</>
) 
}

So, the problem is whenever click the button to open the modal, 2 Modal divs are created and appended to the body. I do not understand, what is the problem ? If you can help me in any way, then it will be a great help. @jsdisco

That code is really confusing, you’re using React. But at the same time you’re directly manipulating the DOM with Vanilla JS methods. Left aside that it’s a huge anti-pattern, I suppose it’s also an invitation for weird bugs.

I would expect something like this instead:

First, the parent component. It holds the state whether the Modal should be open or not. If modalOpen is true, it renders it. If modalOpen is false, it just doesn’t render it (the pattern is called “conditional rendering”). It also passes down a function so the Modal can have a button to close it.

import Modal from './components/Modal'

function parentComponent(){
    const [modalOpen, setModalOpen] = useState(false);

    function closeModal(){
        setModalOpen(false)
    }

    return (
        <div>
            <button onClick={() => setModalOpen(true)}>click to open modal</button>

            /* conditional rendering */
            {modalOpen && <Modal closeModal={closeModal} />}
        </div>
    )
}

Now the Modal component, where you pass down the function to close it:

function Modal({ closeModal }){
    return (
        <div className="modal">
            <p>I am the Modal</p>
            <button onClick={closeModal}>click to close modal</button>
        </div>
    )
}

Thank you for the quick reply @jsdisco .

I am trying to make modals using portals in react. And, I want to make the modals dynamic by automatically making the modals on the fly.

So, I am making the code somewhat like this.

function Modal({children, open, setOpen}) {
    if (!open) return null

    const modalID = `Modal_${uuidv4()}`;
    let modalContainer = document.getElementById(modalID);

    if (!modalContainer) {
        modalContainer = document.createElement('div');
        modalContainer.id = modalID;
        document.body.appendChild(modalContainer);
    }

    return createPortal(
        <>
            {children}
            <button className="ui button" onClick={setOpen}>Close</button>
        </>,
        document.getElementById(modalContainer.id)
    )
}

So, actually, whenever some one creates a modal using the Modal Component, then a new Modal with new ID will be generated and appended in the body using portal. So, making it to reuse the component for multiple modals as well.

So, for this reason I was making the Modal code to use Vanilla JS for creating element. If you can suggest me a better way then also, it will be helpful.

I think I just did suggest a better way. You see, React works like this: If a component should be shown on the screen, you render it. If not, you don’t render it. It makes no sense to create a component that creates a div. The component is the div, and you either show it on screen or not. But you don’t append divs directly to the DOM, it’s completely anti-React and it will cause bugs.

There’s no need to create multiple Modal divs. You define one Modal component, and you can render that as many times as you like, each with a different text if you like.

If you’ve only used Vanilla JS DOM manipulation so far to write your code, it can be difficult to switch to “thinking in React”, it takes a while to get used to it. But whenever you find yourself using methods like document.getElementById or document.createElement or document.body.appendChild, you’re using anti-patterns.

Ok thank you for your reply @jsdisco . But what if I have to show multiple modals at once like stacking, one above another using portals, won’t it create a problem and if I do not create element on the fly because portal requires an element where it can render the modal, right ?

Alright there was some misunderstanding on my side, I’ve been coding in React for quite a while now and I never heard of React Portals before. Just reading about it. I’ve never encountered a situation where I would’ve needed to render something outside of my app’s root element, so I guess I might be the wrong person to ask.

Since this thread has drifted away a little from its original topic (title still talks about semantic ui), maybe open a new thread where you specifically ask about React Portals, and link to this one. Hopefully someone who has some experience with them can give you better advice.

Thank you for your reply @jsdisco . It’s OK. Thank you for your help anyway.

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.