Sizing the Controls about react-flow HOT 4 CLOSED

Hey @agrawal-rohit,

you can overwrite the CSS via:

.react-flow__controls-button {
  width: 16px;
  height: 16px;
}

from react-flow.

@moklick That worked, thank you so much for the quick response! Great library by the way :)

from react-flow.

Hello, I am having some issues with adding styles on the controls object - even the simpler example above isn't working for me. This is the CSS I am adding

Dag.css:

.react-flow__controls {
    display: flex;
    justify-content: space-between;
    position: absolute;
    z-index: 5;
    top: 20px;
    left: calc(50% - 200px);
    height: 50px;
    width: 400px;
    background-color: white;
    border: 1px solid darkgray;
    border-radius: 5px;
}

.react-flow__controls-button{
    width: 40px;
    height: 40px;
    border: none;
    background-color: white;
    border-radius: 5px;
}

.react-flow__controls-button svg {
    max-height: 20px;
    max-width: 20px;
}

And in my Dag.js file, I import my Dag.module.css for my CSS modules as well as the above Dag.css file.

which when I run npm start in test mode, it appears to be working correctly:

But when I deploy a site using npm run build I am getting this:

Inlining the styles directly in the Controls and ControlButton is working slightly better, but I am now missing the gray-on-hover effect and can't inline that selector. I suspect this is due to the default and theme styles being injected into <head/> in a different order during the build step than how local mode works. Going for the nocss option seems like overkill since I just want to override a couple styles - I presume I'm doing something wrong here.

I am using CRA, react 18.2, and react-flow-renderer 10.3.14. Thank you in advance!

from react-flow.

try to strengthen the selector with .react-flow:

.react-flow .react-flow__controls {
    display: flex;
    justify-content: space-between;
    position: absolute;
    z-index: 5;
    top: 20px;
    left: calc(50% - 200px);
    height: 50px;
    width: 400px;
    background-color: white;
    border: 1px solid darkgray;
    border-radius: 5px;
}

.react-flow .react-flow__controls-button {
    width: 40px;
    height: 40px;
    border: none;
    background-color: white;
    border-radius: 5px;
}

.react-flow .react-flow__controls-button svg {
    max-height: 20px;
    max-width: 20px;
}

Does this work?

from react-flow.