Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Accessing style properties of a specific grommet component for use in a custom component in a tidy style object

See original GitHub issue

Based on the documentation on Accessing theme data outside Grommet Components I’d expect to be able to access style properties from defaultProps.textInput to use in my own input component like so, <input style={{...defaultProps.textInput}}input>

Instead defaultProps.textInput is just an empty object which serves no utility.

https://codesandbox.io/s/defaultprops-textinput-issue-4nib4

Issue Analytics

State:
Created 3 years ago
Comments:14 (8 by maintainers)

Top GitHub Comments

1reaction

IanKBovardcommented, May 7, 2020

Sure, i can do that.

0reactions

skylerisskylercommented, May 12, 2020

Thanks @IanKBovard, I think this is the solution I am looking for. After I sent my last comment I found the theme props in the documentation. I think I can figure it out from the two links you’ve provided.

Top Results From Across the Web

How do I custom style Grommet components? #3049 - GitHub

I'm just clear on how to add custom styles to all components and one ... I do use the Grommet component to pass...

6 Tips for Styling with Grommet - Atomic Spin

6 Tips for Styling with Grommet · Don't declare the entire theme. · Prioritize the Grommet API, not custom CSS or inline styles....

the top level grommet container

Custom messages for grommet components. Use this property to define messages or a function to get localized messages for any grommet children components....

Using Custom Properties to Modify Components | CSS-Tricks

All we'd have to do is edit a single variable that's in the :root , plus we can then edit those custom props...

Using Grommet In React Applications - Smashing Magazine

Styles can be added to a Grommet component as objects like we did to the Button or they can be styled using styled-components....