在当前版本(即非 alpha)版本中,您所问的确实需要!important
基础:
“请注意,内联定义的 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;