css - CSS 未按预期呈现

问题描述

我有以下风格Calculator.css

.front {
  display: flex;
  justify-content: center;
  text-align: center;
  align-items: center;
  height: 100vh;
  width: 100%;
}

.calc-wrapper {
  width: 400px;
  height: 600px;
}

.row {
  display: flex;
  text-align: center;
  width: 100%;
}

当我将它导入我的组件时Calculator.jsx：

  import "./css/Calculator.css";
  ...
  render() {
    return (
      <div className="front">
        <div className="calc-wrapper">
          <Input input={this.state.input} />
          <div className="row">
            <Button>4</Button>
            <Button>5</Button>
            <Button>6</Button>
          </div>
        </div>
      </div>
    );
  }

正如预期的那样，它连续显示三个按钮：

现在我将这个组件翻转到另一个，Field.jsx.

字段.css

.back {
  display: flex;
  justify-content: center;
  text-align: center;
  align-items: center;
  height: 100vh;
  width: 100%;
}

.field-wrapper {
  width: 400px;
  height: 600px;
}

.field-row {
  display: flex;
  width: 100%;
}

并使用相同的逻辑Field.jsx

import "./css/Field.css";
...
render() {
    const { items } = this.props;
      return (
       <div className="back">
          <div className="field-wrapper">
            <Output output={this.props} />
            <div className="field-row">
              <Position>{items[0]}</Position>
              <Position>{items[1]}</Position>
              <Position>{items[2]}</Position>
            </div>
        </div>
      );
  }

我正在水平显示项目...

位置.css

.position-wrapper {
  height: 4em;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  font-weight: lighter;
  font-size: 1.4em;
  background-color: #e0e1e6;
  color: #888888;
  flex: 1;
  outline: 1px solid #888888;
}

.field {
  background-color: #fe9241;
  color: #ffffff;
}

位置.jsx

import React from "react";
import "./css/Position.css";


const isOperator = val => {
  return !isNaN(val) || val === "." || val === "=";
};

export const Position = props => (
  <div
    className={`position-wrapper ${
      isOperator(props.children) ? null : "field"
    }`}
    onClick={() => props.handleClick(props.children)}
  >
    {props.children}
  </div>
);

我错过了什么？

标签： cssreactjs

尝试将属性：添加flex-direction:row;到项目

.field-row {
  display: flex;
  flex-direction: row;
  width: 100%;
}

或到项目

    .back {
      display: flex;
      flex-direction: row;
      justify-content: center;
      text-align: center;
      align-items: center;
      height: 100vh;
      width: 100%;
    }

css - CSS 未按预期呈现

问题描述

解决方案

推荐阅读