React 和 Material UI Div 框答案

【问题标题】：React and Material UI Div boxesReact 和 Material UI Div 框
【发布时间】：2018-04-09 10:04:53
【问题描述】：

我正在尝试使用 React 和 Material UI 构建一个模拟网站，我使用 RaisdedButtonExampleSimple 组件作为 Material UI 中的按钮。这是在一个名为 App-Intro 的 div 中，上面是带有文本的 Div “Customer-Choice”。文本显示在按钮上方，即使它位于我的 App.js 代码中按钮下方的 Div 中。这是有原因的吗？

Picture of the display

.App {
    text-align: center;
}

.iconmenu {
    margin: auto;
}

.App-logo {
    /* animation: App-logo-spin infinite 20s linear; */
    height: 200px;
}

.App-header {
    background-color: rgb(255, 255, 255);
    height: 150px;
    padding: 20px;
    color: white;
}

.App-title {
    font-size: 1.5em;
}

.App-intro {
    font-size: 1.5em;
}

.Customer-Choice {}

@keyframes App-logo-spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import "./button.css";
import ReactDOM from 'react-dom';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import getMuiTheme from 'material-ui/styles/getMuiTheme';
import AppBarExampleIcon from './Navbar';
import {lightGreen600} from 'material-ui/styles/colors';
import BadgeExampleSimple from "./badge";
import IconMenuExampleSimple from "./iconmenu.js";
import RefreshIndicatorExampleLoading from "./refreshindicator.js"
import RaisedButtonExampleSimple from "./button.js"


class App extends Component {
  render() {
    return (
      <MuiThemeProvider>
      <div className="App">
    <AppBarExampleIcon iconClassNameLeft={BadgeExampleSimple}
color1 = {lightGreen600} />
{/* <div className = "iconmenu"> <IconMenuExampleSimple/> </div> */}


  
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <div className="button1"><RaisedButtonExampleSimple/></div>
          <h1 className="App-title">Welcome to React</h1>
        </header>
        <h1 className="App-intro">
          Lawn Service and Home Cleaning Done Right
        </h1>
      </div>
      <div className="Customer-Choice">
      
      <h1>Why Customers Choose Us</h1>
      </div>
    </MuiThemeProvider>
    );
  }
}

export default App;

【问题讨论】：

你还有 CSS 可以展示吗？
在 JS Fiddle 中的任何工作示例或仅部分代码？

标签： html css reactjs material-ui

【解决方案1】：

检查<h1>Why Customers Choose Us</h1>，它可能继承了导致问题的CSS。

你也可以给这个<h1 className="customerChoice">添加一个类名，并在你的CSS中定位它

.customerChoice { display: block; height: 80px; text-align:center; }.

【讨论】：