打破 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 样式组件样式的全局样式的主要内容,如果未能解决你的问题,请参考以下文章