How to add styles to GLSP elements

[rileydanejohnston]

Hello,

I’m trying to figure out how I can add my own styles to my graphical editor. I’m using the node backend with the vscode extension client.

I see in the documentation you can add styles to GLSP elements via CSS. I’m able to create classes with custom styles in a stylesheet and add those classes to my elements via addCssClass, but the new styles don’t show up in the client. For example, if I try to change the background color of a GNode element with fill: rgb(68, 30, 163), the vscode variable styles persist:

It looks to me like I need change the fill of the rect element. I've tried to target it with a bunch of different css selectors but the var(--vscode-editor-foreground) style persists. Here's a few examples:

_.parent-node > rect {
fill: rgb(128, 90, 233);
}

rect.sprotty-node {
fill: rgb(128, 90, 233);
}_

I suspect that my stylesheet is not being imported in the correct place. I’ve tried importing it into the di.config.ts file like the docs suggest but no luck. I’ve also tried importing it into various places on the server side, like the app.ts and index.ts files but it causes the project to not start because of a connection error.

I’m trying to figure out why the custom styles I create are not being applied to my elements. Please let me know if you need any additional information. Thank you

[martin-fleck-at]

@rileydanejohnston Hello, did you manage to resolve your issue in the meantime? It is not clear to me whether you mean that your stylesheets are not loaded, i.e., they do not show up at all when investigating the applied styles, or whether your styles are overridden, could you please clarify.

If your styles are overridden (due to some more specific selector or the order of the CSS files not being as you would expect), you can try to add an !important rule to ensure your style gets priority, e.g.,

.parent-node > rect {
  fill: rgb(128, 90, 233) !important;
}

rect.sprotty-node {
   fill: rgb(128, 90, 233) !important;
}

[rileydanejohnston]

Hi Martin, thank you for the reply. The issue was on my end. To make a long story short, the client TS files were not getting compiled. Also, thank you for the !important recommendation, that has been quite helpful!