如何在Paper Material-UI

Question

我尝试用material-ui制作Paper的垂直中心。

我的代码如下：

const style = {
  height: 150,
  width: 150,
  margin: 20,
  textAlign: 'center',
  rounded: true
};


 render () {
    let { currentTime, isRunning } = this.state;
    let stopWatchTime = this.showCorrectTime(currentTime);
    let buttonName = isRunning ? 'Stop' : 'Start';
    let buttonRole = isRunning ? this.stopTime : this.startTime;

    return (
      <div>
        <TextField
          multiLine
          rows={2}
          rowsMax={4}
         />
        <Paper style={style} zDepth={5} circle >{stopWatchTime}</Paper>
        <button onClick={buttonRole}>{buttonName}</button>
      </div>
    );
  }
}

我尝试verticalAlign但没有帮助。另外，我没有在文档中找到带有文本的选项。请现在，提供有关如何在Paper中居中文本的信息，或者提供有关如何使用文本的信息。

图片示例，我现在拥有的

Answer 1

不要将内容直接放在Paper中，而是将其放在div内，并使用css属性将其正确对齐。

像这样：

<Paper style={style} zDepth={5} circle >
   <div style={{marginTop: '....'}}> 
      {stopWatchTime}
   </div>
</Paper>

选中此示例：https://jsfiddle.net/mayankshukla5031/o22jy5hs/