I attempted to update my current App to utilize Grommet for the Inputs. The transition went smoothly, but I encountered a problem with the styles.
Because the react-App is embedded on various pages, I have to contend with various types of global css styles. Previously, I used inline styles which allowed me to use all:revert to eliminate most of the global styles within my react container. However, using styled-component prevents this method from working as it also removes the styles from my app.
The challenge lies in the fact that the global styles are more specific than the grommet styles applied by styled-components.
Is there a way to resolve this issue? Maybe make the styled-component style more important? Or prevent any other global styling.
An example of CSS on the HTML Page causing issues with the controls (taken from a wordpress theme where my react app is integrated) 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 appears very basic:
<div className="App">
<Box align={"center"}>
<Select options={["Test 1","Test 2","Test 3","Test 4"]} />
</Box>
</div>
The malfunctioning Select Control from Grommet
Live Example
Code From Live Example
Do you have any suggestions on how to handle the global styles and ensure the controls function properly? Unfortunately, I do not have access to the global styles, so I require a solution within my react app.
One option could be to only include the react App in an iframe, but if there's another way, I'd prefer to avoid that. (Perhaps there isn't any alternative)
Wishing you a great day, Alex