0

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?

kokaneka
  • 11
  • 1

2 Answers2

0

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

Marco Medrano
  • 2,530
  • 1
  • 21
  • 35
  • Hi Marco. Thanks for the answer. Thing is, in the LoginForm component that I am talking about, we do not even have access to the submit button so that I can apply styles to that as specified by you. What is to be done in such a case? – kokaneka May 16 '17 at 08:15
  • Ho I see, the LoginForm is a composed component so in this case you should do the Form from scratch, there you can set the styles to each component. – Marco Medrano May 16 '17 at 15:07
  • Some thing like this [codepen](http://codepen.io/MarcoMedrano/pen/vmamxR?editors=0010) – Marco Medrano May 16 '17 at 15:07
0

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.

Juan Lanus
  • 2,293
  • 23
  • 18