How to customize styles?

[PhucNgo1711]

I'm trying to use this with React. I was able to set it up like this https://codesandbox.io/s/vuerd-react-test-uzfld?file=/src/App.js

I see that there are these options to customize styles here https://vuerd.github.io/vuerd/?path=/docs/example-demo--erd-editor

but I am not able to figure out how to actually use them in the code.

Any help is appreciated. Thanks!

[dineug]

Documents can be found at: https://github.com/vuerd/vuerd/tree/master/packages/vuerd Built-in CSS examples https://github.com/vuerd/vuerd/tree/master/packages/vuerd/theme

[Daybayzayd]

Is there a way to have different table background ?

For example One table with blue background (in the title for example), another with green background etc. ?

I would like to recognize different type of table directly with the color, like this : https://drawsql.app/img/drawsql-screenshot-2.png

[PhucNgo1711]

Documents can be found at: https://github.com/vuerd/vuerd/tree/master/packages/vuerd Built-in CSS examples https://github.com/vuerd/vuerd/tree/master/packages/vuerd/theme

Ah thank you

[dineug]

Is there a way to have different table background ?

For example One table with blue background (in the title for example), another with green background etc. ?

I would like to recognize different type of table directly with the color, like this : https://drawsql.app/img/drawsql-screenshot-2.png

There is no function at this time. Function development is simple, so I'll add it.

@Daybayzayd

[PhucNgo1711]

@dineug how do I overwrite some custom css? Right now stuff like this is being ignored

.vuerd-table .vuerd-table-header-top .vuerd-button {
  height: 1em !important;
}

[dineug]

I don't recommend it because it breaks the size calculation.

Here's how: https://www.html5rocks.com/ko/tutorials/webcomponents/shadowdom-201/

@PhucNgo1711

[PhucNgo1711]

I don't recommend it because it breaks the size calculation.

Here's how: https://www.html5rocks.com/ko/tutorials/webcomponents/shadowdom-201/

@PhucNgo1711

Got it thanks! I was actually trying something else. The height was just a random example.

[PhucNgo1711]

@dineug So I was able to use the shadow DOM styling for something like, as an example, the body tag, but I still can't use it for .vuerd-table-button https://codesandbox.io/s/vuerd-react-test-uzfld?file=/src/App.js

Did I miss something?

[dineug]

I've tried a few things. I don't think it's working.

To add a style to ShadowRoot, you must import ShadowRoot.

const shadowRoot = editor.shadowRoot;
shadowRoot.appendChild(style);

@PhucNgo1711

[Daybayzayd]

Is there a way to have different table background ? For example One table with blue background (in the title for example), another with green background etc. ? I would like to recognize different type of table directly with the color, like this : https://drawsql.app/img/drawsql-screenshot-2.png

There is no function at this time. Function development is simple, so I'll add it.

@Daybayzayd

Thanks for the quick reply and thanks for your great tool ! :) If the job is just modifying CSS class or dom object, maybe i can do this.