Style manager changes are overridden by custom css

[codingmachine16]

Hi @artf

When I add main.css
canvas: {
styles: [
"https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css",
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css",
"https://pro.fontawesome.com/releases/v5.10.0/css/all.css",
"./css/canvas.css",
"./css/main.css",
],
scripts: [
"https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js",
"https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js",
],
},

In main.css there is a rule

                    #full-header-2 #headerTop p {
                      color: #000000;
                      font-family: 'Livvic', sans-serif;
                      font-size: 11px;
                      text-transform: capitalize;
                      font-weight: bold;
                      padding-top: 5px;
                    }

Now when I try to change color of P from style manager , it is not overriding custom css. Please help in this regard

[artf]

Try to use componentFirst option

grapesjs.init({
	...
	selectorManager: { componentFirst: true },
})

[codingmachine16]

@artf It does not work

[Ju99ernaut]

Looks like this has more to do with selector specificity. For example grapesjs will generate css with the #full-header-2 selector which is less specific compared to #full-header-2 #headerTop p.

[saudAtIrisdame]

Hi @codingmachine16 @artf

I facing the same issue, I have loaded bootstrap. bootstrap styles work in canvas but I can't see them in the style manager.

How did you solve this issue? it would be helpful if you share a solution.