0

我一直在尝试将styled-componentsmaterial-ui的alpha版本一起使用

根据文档,这应该是开箱即用的。

这段代码:

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)的顺序。来自 styled-components 的样式在 MUI 的样式之前注入,这会降低它们的优先级。

有什么方法可以在不使用的情况下解决这个问题!important

4

3 回答 3

0

现在我们可以使用<!-- material-ui -->它来确保样式在它之后被注入。

默认情况下,Material-UI 会寻找一个命名为注入样式的 html 注释。通过调整此注释在 HTML 正文中的位置,您可以控制 CSS 规则应用于组件的顺序。(参考

于 2017-07-28T03:58:01.330 回答
0

在当前版本(即非 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;
于 2017-07-10T00:37:53.527 回答
0

styled-components通常与任何组件库兼容。当您编写时,styled(AnotherComponent)我们采用该组件并注入一个自动生成的类名。这意味着本质上它与写作是一样的<AnotherComponent className="sc-asdf123" />

当前版本的material-ui特别是自定义样式有点困难,因为它使用内联样式。从MaterialUI 文档

请注意,内联定义的 CSS 属性优先于 CSS 类中定义的属性。您需要使用 !important 优先于内联样式。

这意味着简单地使用styled(MaterialButton)将不起作用,因为传入的样式大多会被忽略。您需要提高样式的特异性以覆盖material-ui随附的内联样式。(如果你不熟悉细节,这篇文章是一个很好的特异性入门)


答案的 alpha 版本material-ui

当前的 alpha 版本material-ui已切换到在后台使用 JSS。(这是JS 中的 CSS 而不是内联样式,例如styled-components)这意味着问题很可能是styled-components样式是在默认样式之后注入的material-ui。(由 JSS 注入)

JSS 支持自定义注入点,因此您可以在<!-- jss -->HTML 的 HEAD 中添加注释,以确保 JSS 在注入 CSS 之前注入其styled-componentsCSS?


回答当前版本material-ui

有两种方法可以提高styled-components注入样式的特异性,一种更乏味,一种更“hacky”。第一个是!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在每个规则之后放置更不烦人。

于 2017-07-11T15:56:35.783 回答