我一直在尝试使用样式组件与 alpha-strong 的 alpha 版本
根据documentation,这应该是开箱即用的。
此代码:
const StyledButton = styled(Button)`
color: red;
text-transform: uppercase;
`;
return <StyledButton>Button</StyledButton>;
将生成如下内容:
<button tabindex="0" class="MuiButtonBase-root-3177716317 sc-bdVaJa sxRGN" type="button" role="button">
...
</button>
看起来不错。
然而,我唯一的问题是注入的CSS样式的顺序(pic)。样式组件的样式在MUI的样式之前注入,这使得它们的优先级降低。
有没有办法在不使用!important
的情况下解决这个问题?
答案 0 :(得分:0)
在当前版本(即非alpha版)中,您提出的问题确实需要!important
:
“请注意,内联定义的CSS属性优先于CSS类中定义的CSS属性。您需要使用!important来优先于内联样式。”
参考:http://www.material-ui.com/#/customization/styles
也许alpha还没有完全脱离这个内联需求,或者它仍然是一个正在进行的工作。
当我需要这样的解决方案时,我自己要做的就是(不幸的是)在标准<button>
元素上重新创建整个CSS。以下是我使用react-photonkit
“主题”
// @flow
import styled from 'styled-components';
const PhotonStyledButton = styled.button`
font-family: Arial, Roboto, Helvetica, sans-serif;
height: 30px;
display: inline-block;
padding: 6px 12px;
margin-bottom: 0;
font-size: 12px !important;
line-height: 1.4;
text-align: center;
white-space: nowrap;
vertical-align: middle;
cursor: default;
background-image: none;
border: 1px solid transparent;
border-radius: $default-border-radius;
box-shadow: 0 1px 1px rgba(0,0,0,.06);
-webkit-app-region: no-drag;
&:focus {
outline: none;
box-shadow: none;
}
color: #333;
border-top-color: #c2c0c2;
border-right-color: #c2c0c2;
border-bottom-color: #a19fa1;
border-left-color: #c2c0c2;
background-color: #fcfcfc;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fcfcfc), color-stop(100%,#f1f1f1));
background-image: -webkit-linear-gradient(top, #fcfcfc 0%, #f1f1f1 100%);
background-image: linear-gradient(to bottom, #fcfcfc 0%, #f1f1f1 100%);
&:active {
background-color: #ddd;
background-image: none;
}
`;
export default PhotonStyledButton;
答案 1 :(得分:0)
styled-components
通常与任何组件库兼容。当您编写styled(AnotherComponent)
时,我们会获取该组件并注入自动生成的类名。这意味着它与编写<AnotherComponent className="sc-asdf123" />
!
当前版本的material-ui
特别难以定制样式,因为它使用内联样式。来自MaterialUI documentation:
请注意,内联定义的CSS属性优先于CSS类中定义的CSS属性。你需要使用!important来优先于内联样式。
这意味着简单地使用styled(MaterialButton)
不会起作用,因为传入的样式通常会被忽略。您需要提高样式的特异性以覆盖material-ui
附带的内联样式。 (如果您不熟悉细节,this article是一本关于特异性的很好的入门读物)
回答material-ui
material-ui
的当前alpha版本已经转而使用JSS。 (CSS in JS not inline styles就像styled-components
一样)这意味着问题可能是在默认styled-components
样式之后注入material-ui
样式。 (由JSS注入)
JSS支持custom injection points,因此您可以向HTML的HEAD添加<!-- jss -->
注释,以确保JSS在styled-components
注入CSS之前注入其CSS?
回答当前版本的material-ui
有两种方法可以突破styled-components
注入样式的特异性,一种更乏味,另一种更多&#34; hacky&#34;。第一个是在所有样式的末尾添加!important
:
const Button = styled(MaterialButton)`
color: blue!important;
`
虽然这在大多数情况下都适用,但是当您在组件中有大量自定义样式时,它会非常繁琐。更好的方法是使用类名hack:
const Button = styled(MaterialButton)`
&&& {
color: blue;
}
`
这些&符号被自动生成的类名替换,这意味着输出的CSS看起来像这样:
.sc-asdf123.sc-asdf123.sc-asdf123 {
color: blue;
}
这大大提高了特异性,从而覆盖了定义的内联样式,并且比在每个规则之后放置!important
更不烦人。
答案 2 :(得分:0)
现在我们可以使用<!-- material-ui -->
来确保在它之后注入样式。
默认情况下,Material-UI将查找名为注入样式的html注释。通过在HTML正文中调整此注释的位置,您可以控制CSS规则应用于组件的顺序。 (ref)