css - 通过覆盖样式 Prop 让 material-ui 组件显示为内联

Question

我正在尝试让一个复选框出现在输入字段“answer input one”的右侧 我已经尝试使用 display 属性，但一般来说我真的很难处理 css 布局。 what I am currently getting

这是呈现答案输入的代码:

     <div>
  <TextField
  hintText="An informative question title..."
  fullWidth
  floatingLabelText="Question Title"
  value={questionTitle}
  onChange={(e) => this.props.questionTitleChanged(e.target.value)}
  />
  <TextField
  floatingLabelText="Answer Input 1"
  onChange={(e) => this.props.questionInputChanged({
    inputIndex: 0,
    value: e.target.value,
    correct: false
  })}
  value={questionInputs[0].value}
  style={styles.answerField}
  />

  <Checkbox
  onCheck={() => {
    let correctOrIncorrect = null;

    if (questionInputs[0].correct) {
      correctOrIncorrect = false;
    } else { correctOrIncorrect = true; }

    this.props.questionInputChanged({
    inputIndex: 0,
    value: null,
    correct: correctOrIncorrect });
  }}
  style={styles.checkbox}
  />

  </div>

内联样式在这里:

const styles = {
  createQuizContainer: {
    width: '70%',
    margin: 'auto',
    paddingTop: 30,
    paddingBottom: 40
  },
  answerField: {
    width: '70%',
  },
  checkBox: {
    display: 'inline',
  }

};

将不胜感激!以及关于一般使用 css 布局的任何建议!

谢谢。

Answer 1

你可以使用 flexbox:

render() {
    return (
        <div style={{ display: 'inline-flex' }}>
            <div>
                <TextField />
            </div>
            <div style={{ alignSelf: 'center' }}>
                <Checkbox />
            </div>
        </div>
    );
}

https://jsfiddle.net/2v1Legy2/1/