Question

我正在使用component demo创建AppBar：

Navbar组件：

const styleSheet = createStyleSheet('Navbar', {});

function Navbar(props) {

  return (
      <div>
        <AppBar position="static">
          <Toolbar>
            <IconButton color="contrast" aria-label="Menu">
              <MenuIcon />
            </IconButton>
            <Typography type="title" color="inherit" >Title</Typography>
            <Button color="contrast">Login</Button>
          </Toolbar>
        </AppBar>
      </div>
  );
}

Navbar.propTypes = {
  classes: PropTypes.object.isRequired,
};

// Now applying the (empty) style:    
const StyledNavbar = withStyles(styleSheet)(Navbar);

这有效：

class Layout extends Component {
  render() {
    return (
        <MuiThemeProvider>
          <div>
            <Navbar />
          </div>
        </MuiThemeProvider>
    );
  }
}

但以下情况并非如此。没有显示任何内容且没有错误：

class Layout extends Component {
  render() {
    return (
        <MuiThemeProvider>
          <div>
            { StyledNavbar }
          </div>
        </MuiThemeProvider>
    );
  }
}

export default Layout

无法判断我做错了什么。

其他信息：

我正在使用此html标记在我的rails应用中实现此功能：

<div data-react-class="Layout" data-react-props="{}"></div>

让react-rails发挥其魔力。

Answer 1

它可能会有所帮助，渲染这样的组件

＆＃13;

import { withStyles, createStyleSheet } from 'material-ui/styles';
import AppBar from 'material-ui/AppBar';
import { MuiThemeProvider } from 'material-ui/styles';

<MuiThemeProvider>
    <div>
        <StyledNavbar/>
    </div>
</MuiThemeProvider>

＆＃13;

Answer 2

您需要像这样渲染public void println(String x)组件：

StyledNavbar

如何在MuiThemeProvider标签内包含带样式的组件？

2 个答案: