Material-UI @next 不支持基于 props 的样式？

Question

随着 Material-UI@next 的到来，基于 CSS-to-JS 的样式取代了基于 LESS 的样式。但是，Material-UI's website 上的组件演示似乎忽略了基于道具的样式的创建。我正在尝试在我的页面上创建包含特定绝对高度的各种 Material-UI 组件的divs，但是，在类之外预定义样式表的要求意味着样式表中的属性不能基于传递给组件的道具。我错过了什么吗？

例如：

import React, {Component} from 'react';
import {withStyles, createStyleSheet} from 'material-ui/styles';
import Button from 'material-ui/Button';
const styleSheet = createStyleSheet({
    container: {
        position: "absolute",
        top: /*How can this be dependent upon the props passed to the component?*/,
        height: /*How can this be dependent upon the props passed to the component?*/,
    }
});
class Foo extends Component {

  render() {
        let classes = this.props.classes;
    return (
      <div className={classes.container}>
        <Button raised/>
      </div>
    );
  }
}

export default withStyles(styleSheet)(Foo);

上面显示的示例组件不能有依赖props 的样式，因为在创建样式表时没有定义props。那么我该如何解决这个问题呢？ 是否有解决办法吗？

Answer 1

我强烈建议您查看Styled Compoments。它们使样式变得非常简单，甚至允许您传递第三方组件（在您的情况下为 Material UI 组件）。它们还允许您传递如下道具：

const Stylesheet = styled.div`
    color: ${props => props.primary ? 'white' :
`

<Stylesheet primary>My Div</Stylesheet>

查看docs 了解更多详细信息，这是一个非常简单的示例，但它们非常易于使用，您可以使用它们完全满足您的需求。