CODEWITHSUNDEEP
cssreactjsstyled-componentsgrommet
Alexander Bogoslawski
Alexander Bogoslawski

Reputation: 1

Global Styles breaking Grommet styled-components styles

I've tried to change my existing App to use Grommet for the Inputs. It worked quite fine, but I got a problem with the styles.

The react-App is included on different pages, so I have to deal with different kinds of global css styles. Before Grommit Ive used inline styles, so I was able to use all:revert to get rid of most of the global styles inside my react container. But with styled-component this won't work, because it also clears the styles from my app.

The problem is that the global styles are more specific than the grommet styles from the styled-components.

Is the way to fix this? Maybe make the styled-component style more imortant? Or prevent any other global style.

And example for a CSS on the HTML Page which breaks the controls (taken from a wordpress theme where my react app is used) would be:

    <style>
      input:not([type]), input[type="email"], input[type="number"], input[type="password"], input[type="tel"], input[type="url"], input[type="text"] {
        border-radius: 3px;
        margin-bottom: 20px;
        box-shadow: inherit;
        padding: 6px 12px;
        line-height: 25px;
      }

      input[type="text"], input[type="email"], input[type="url"], input[type="password"], input[type="search"], input[type="number"], input[type="tel"], input[type="range"], input[type="date"], input[type="month"], input[type="week"], input[type="time"], input[type="datetime"], input[type="datetime-local"], input[type="color"], textarea {
        border-radius: 3px;
        display: block;
        font-size: 14px;
        height: 50px;
        line-height: 1.42857;
        padding: 6px 12px;
        transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s;
        vertical-align: middle;
        width: 100%;
        background-color: #fefefe;
        border: 1px solid #dcdcdc;
        box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
        color: #121212;
      }

      label {
        display: inline-block;
        width: 100%;
        margin-bottom: 5px;
        font-weight: bold;
      }
    </style>

The Grommet Control looks very basic:

    <div className="App">
      <Box align={"center"}>
        <Select options={["Test 1","Test 2","Test 3","Test 4"]} />
      </Box>
    </div>

The broken Select Control from Grommet

Live Example

Code From Live Example

Do you have an idea how to deal with the global styles and make the controls work? Sadly I'm not able to access the global styles, so I need a solution inside my react app.

One idea would be to include the react App only in an iframe, but if there is any way I would like to avoid that. (Maybe there's no other way)

Have a nice day, Alex

Upvotes: 0

Views: 792

Answers (1)

Shimi
Shimi

Reputation: 1218

Is the way to fix this? Maybe make the styled-component style more imortant? Or prevent any other global style.

The short answer is YES, prevent any other global style.

The long answer is that as part of the Grommet framework, the Grommet users are not encouraged to use CSS styles explicitly and should control styles in the following ways instead:

  1. Component props - to style specific component.
  2. Theme properties - for a more consistent look and feel across the app.
  3. Styled Components - to create a new component with its own styles using styled-components.

For example, in your case, you can use the entry of global.input from the theme in order to style your inputs consistently across the application.

Upvotes: 0

Related Questions