How to override default styles in Grommet?

Question

I have a grommet JS project in which I am using a LoginForm component.

I have gone through the component's help page and can see the functionality that it provides. Here is the reference:

https://grommet.github.io/docs/login-form

But, What if I have a custom requirement? Say, to make the login button disabled until both username and password are entered? How do I then get a reference to that button and the text fields there?

Is it even allowed to do this according to Grommet methodologies?

Answer 1

I dont think it is very recommendable to override styles as the framework is for that, it provides with a lot of options but all of them according the harmony of the framework, checkout the button's examples

Also if you want that disabled it is enough to do not provide an onClick property or put it as falsy value:

<Button label='submit'  onClick={null} />

However yes there are special cases where you want to put your own styles so you can do something like:

<Button label='submit' style={{ marginRight: 2, marginLeft: 2 }} />

As you can see the style is not a string but an object, more info in inline styles | React

Answer 2

Grommet provides a mechanism to manage the theme so it fits your plans.
There are a lot of things that can be changed by creating a custom theme, look at my answer here:
Grommet UI -- Custom Color Schemes
Once you did it, your styles are the default styles. \\ it's not only the colors, many other things can be tuned.