0

我试图更改我现有的应用程序以使用 Grommet 作为输入。它工作得很好，但我遇到了样式问题。

react-App 包含在不同的页面中，因此我必须处理不同类型的全局 css 样式。在 Grommit 之前，我使用了内联样式，因此我能够使用all:revert它来摆脱我的 react 容器中的大部分全局样式。但这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>

来自 Grommet 的损坏的选择控件

现场示例

来自实时示例的代码

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

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

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

4

1 回答 1

0

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

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

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

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

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

于 2021-08-26T21:23:04.163 回答