如何覆盖Grommet中的默认样式？

Question

我有一个使用LoginForm组件的grommet JS项目。

我浏览了该组件的帮助页面，可以看到它提供的功能。下面是参考资料：

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

但是，如果我有一个自定义的需求呢？比如说，在用户名和密码都输入之前，禁用登录按钮？那么如何获得对该按钮和文本字段引用呢？

根据Grommet方法，它甚至可以这样做吗？

Answer 1

我不认为重写样式是非常值得推荐的，因为框架就是为此而设计的，它提供了很多选项，但所有这些选项都符合框架的协调性，请查看button's examples

另外，如果您希望禁用该功能，则不提供onClick属性或将其设置为False值就足够了：

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

但是，是的，在某些特殊情况下，您想要放入自己的样式，这样您就可以这样做：

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

正如您所看到的，样式不是一个字符串，而是一个对象，更多信息请参见inline styles | React

Answer 2

Grommet提供了一种管理主题的机制，以便它适合您的计划。

有很多东西可以通过创建自定义主题来改变，请看我的答案：

Grommet UI -- Custom Color Schemes

一旦你这样做了，你的样式就是默认的样式。\不仅仅是颜色，还有很多其他的东西都可以调整。