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

Posted

技术标签:

【中文标题】打破 Grommet 样式组件样式的全局样式【英文标题】:Global Styles breaking Grommet styled-components styles 【发布时间】: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 完成 【参考方案1】:

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

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

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

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

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

【讨论】:

以上是关于打破 Grommet 样式组件样式的全局样式的主要内容,如果未能解决你的问题,请参考以下文章

如何在全局样式表中设置角度4组件选择器的样式?

为啥子组件样式被全局 css 覆盖?

styled-components - 为啥在组件样式之后注入全局样式?

如何为某些组件全局添加样式

vue里面父组件修改子组件样式的方法

如何将全局样式表导入组件 vue?