打破 Grommet 样式组件样式的全局样式答案

【问题标题】：Global Styles breaking Grommet styled-components styles打破 Grommet 样式组件样式的全局样式
【发布时间】：2021-10-15 17:30:49
【问题描述】：

我尝试将现有应用更改为使用 Grommet 作为输入。它工作得很好，但我的样式有问题。

react-App 包含在不同的页面中，所以我必须处理不同种类的全局 css 样式。在 Grommit 使用内联样式之前，我可以使用 all:revert 来摆脱我的反应容器中的大部分全局样式。但是对于styled-component，这将不起作用，因为它还会从我的应用程序中清除样式。

问题在于全局样式比样式组件中的索环样式更具体。

有办法解决这个问题吗？也许让 styled-component 风格更加重要？或者阻止任何其他全局样式。

HTML 页面上破坏控件的 CSS 示例（取自使用我的 react 应用程序的 wordpress 主题）将是：

    <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>

索环控制看起来非常基本：

    <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

您知道如何处理全局样式并使控件正常工作吗？遗憾的是，我无法访问全局样式，因此我需要在我的 react 应用程序中提供解决方案。

一个想法是将 react 应用程序仅包含在 iframe 中，但如果有任何方法我想避免这种情况。（也许没有别的办法）

祝你有美好的一天，亚历克斯

【问题讨论】：

欢迎来到 SO。请将您问题的代码作为格式化文本或 sn-ps 包含在您的问题中，而不是通过链接。例如，为什么您的代码链接无法加载。
@rmlockerd 完成

标签： css reactjs styled-components grommet

【解决方案1】：

有办法解决这个问题吗？也许让 styled-component 风格更加重要？或者阻止任何其他全局样式。

简短的回答是肯定的，防止任何其他全局样式。

答案很长，作为 Grommet 框架的一部分，不鼓励 Grommet 用户明确使用 CSS 样式，而应通过以下方式控制样式：

组件道具 - 设置特定组件的样式。
主题属性 - 使整个应用程序的外观和感觉更加一致。
样式化组件 - 使用样式化组件创建具有自己样式的新组件。

例如，在您的情况下，您可以使用 theme 中的 global.input 条目，以便在整个应用程序中一致地设置您的输入样式。

【讨论】：