1

我在流星应用程序中使用Callemall react material-ui 依赖项。我想知道如何更改正在使用的 AppBar 的颜色和高度。这可以通过使用内联样式来覆盖主题变量吗？如果是这样，怎么做？

injectTapEventPlugin();
var {AppBar} = MUI;
var {ThemeManager, LightRawTheme} = Styles;

Header = React.createClass({
    childContextTypes: {
        muiTheme: React.PropTypes.object
    },

    getChildContext() {
        return {
            muiTheme: ThemeManager.getMuiTheme(LightRawTheme);
    }
        ;
    },

    render: function () {
        return (
            <AppCanvas>
                <AppBar iconElementLeft={
                    <div className="header-left-area">
                        <FloatingActionButton
                            title="Register"
                            iconClassName="muidocs-icon-action-grade"
                            secondary={true}
                            mini={true}/>
                    </div>
                }/>
            </AppCanvas>
        );
    }
});
4

3 回答 3

4

你可能想远离inline style道具。看到这个。

所有 Material-UI 组件的样式都是内联定义的。您可以阅读有关此决定的讨论主题以及讨论 JS 中的 CSS 的演示文稿。

但是，我们遇到了这种方法的重要限制。

  • 在每次渲染时重新计算所有样式时性能不佳
  • 喧嚣调试
  • 服务器端媒体查询
  • 服务器端伪元素
  • 与服务器端渲染交互的时间更长（例如：hover）

我们现在有 Material UI v1.0。

材质界面 v1.0

你有很多选择来做到这一点——查看实现代码以了解它是如何工作的。

如果这是你的主题

const YourTheme = createMuiTheme({
  palette: createPalette({
    background: {
      appBar: '#000'
    }
  }),
  overrides: {
    MuiAppBar: {
      root: {
        background: '#fff'
      }
    }
  }

});

你有很多选择，这里有2个：

1使用您刚刚编码的默认颜色

<AppBar color={'default'}>
...
</AppBar>

AppBar 将是白色#fff的。

2或继承颜色palette.background.appBar

<AppBar color={'inherit'}>
...
</AppBar>

AppBar 将是黑色#000的。

于 2017-10-28T09:04:48.267 回答
3

有两种方法可以解决这个问题。一种是使用你提到的内联样式道具。这种方式并不完全奏效：

<AppBar style={{backgroundColor='red', minHeight=50}} titleStyle={{lineHeight=50}}/>

原因是在AppBar组件内部，主题的 appbar 高度用于此处的一些计算，使用内联样式不容易覆盖。

应该完全有效的另一种方法如下。在您的Header组件内，选择一个在之前执行的生命周期方法render()。由于您只是将修改后的主题向下传递，我将仅用于getChildContext()演示：

getChildContext() {
  var myTheme = ThemeManager.getMuiTheme(LightRawTheme);

  //override the properties you want to
  //import Colors from 'material-ui/lib/styles/colors'
  myTheme.appBar.color = Colors.<choose-a-color>;
  myTheme.appBar.height = 50;

  //once done overriding, pass the theme using context
  return {
    muiTheme: myTheme
  };
}

所有这些也在主题文档中提到。有关可以覆盖的公开属性列表，请参阅theme-manager.js 。

于 2015-12-02T17:31:50.020 回答
2

要降低高度，请使用：variant="dense"

    <AppBar
      position="fixed"
      className={classNames(classes.appBar, {
        [classes.appBarShift]: this.props.home.openSidebar
      })}
    >
      <Toolbar disableGutters={!this.props.home.openSidebar} variant="dense">
        <IconButton
          color="inherit"
          aria-label="Open drawer"
          onClick={this.handleDrawerToggle}
        >
          <MenuIcon />
        </IconButton>
        <Typography variant="h6" color="inherit" noWrap style={{ flex: 1 }}>
          Tittle
        </Typography>
      </Toolbar>
    </AppBar>

并改变颜色，我认为最好的方法是设置主题

    const theme = createMuiTheme({
      palette: {
        primary: amber,
        secondary: {
          main: '#f44336'
        }
      }
    });

    class App extends Component {
      render() {
        return (
          <MuiThemeProvider theme={theme}>{this.props.children}</MuiThemeProvider>
        );
      }
    }
于 2018-11-16T16:35:07.170 回答