试图增加一些 CSS 类的大小，但不知道从哪里开始

Question

所以我能够找到我的应用所需的一些 CSS 代码，但它有点太小了。我需要帮助将尺寸增加 150%。我只使用 React-Bootstrap 进行样式设置。有没有办法只增加元素的大小而不是调整 CSS 类中的每个属性？

这是我目前得到的：https://codesandbox.io/s/baseball-bases-component-stackoverflow-113u7?file=/example.js

这是代码，虽然很长，但最好展示一下：

反应组件

import React, { Component } from "react";
import { Container, Row, Col } from "react-bootstrap";
import "./example.css";

class GamePlay extends Component {
  render() {
    const styles = {
      grid: {
        paddingLeft: 0,
        paddingRight: 0
      },
      row: {
        marginLeft: 3,
        marginRight: 0
      },
      col: {
        paddingLeft: 0,
        paddingRight: 0
      },
      center: {
        paddingLeft: 0,
        paddingRight: 0
      }
    };


    let situation = {onFirst: true, onSecond: true, onThrid: false, balls: 2, strikes: 1, outs: 2};
    let balls = new Array(4).fill(<span className="circle balls"></span>);
        let strikes = new Array(3).fill(<span className="circle strikes"></span>);
    let outs = new Array(3).fill(<span className="circle outs"></span>);
    
    for (let i = 0; i < situation.balls; i++) {
            balls[i] = <span className="circle balls active"></span>;
        }
        for (let i = 0; i < situation.strikes; i++) {
            strikes[i] = <span className="circle strikes active"></span>;
        }
        for (let i = 0; i < situation.outs; i++) {
            outs[i] = <span className="circle outs active"></span>;
        }

    return (
      <Container>
        <Row>
                    <Col sm="auto">
                        <Row style={styles.row}>
                            <Col sm="auto" style={styles.col}>
                                <div className={"diamond second-base " + (situation.onSecond ? "active" : null)}></div>
                            </Col>
                        </Row>
                        <Row style={styles.col}>
                            <Col sm="auto" style={styles.center}>
                                <div className={"diamond third-base " + (situation.onThird ? "active" : null)}></div>
                            </Col>
                            <Col sm="auto" style={styles.col}>
                                <div className={"diamond first-base " + (situation.onFirst ? "active" : null)}></div>
                            </Col>
                        </Row>
                    </Col>
                    <Col sm="auto">
                        <div className="circleGraphs">
                            <div className="circleGraph  four">
                                <span className="abbrev">B</span>
                                {balls}
                            </div>

                            <div className="circleGraph ">
                                <span className="abbrev">S</span>
                                {strikes}
                            </div>

                            <div className="circleGraph ">
                                <span className="abbrev">O</span>
                                {outs}
                            </div>
                        </div>
                    </Col>
                </Row>
      </Container>
    );
  }
}

export default GamePlay;

CSS 文件

div.diamond.second-base {
  border: 13px solid transparent;
  border-bottom: 13px solid #CBCCCE;
  box-sizing: border-box;
  clear: both;
  color: #6C6D6F;
  font-family: inherit;
  font-size: 100%;
  font-stretch: inherit;
  font-style: inherit;
  font-variant-caps: inherit;
  font-variant-east-asian: inherit;
  font-variant-ligatures: inherit;
  font-variant-numeric: inherit;
  font-weight: inherit;
  height: 0;
  line-height: inherit;
  margin: 0 auto;
  padding: 0;
  position: relative;
  top: -2px;
  vertical-align: baseline;
  width: 0;
}

div.diamond.second-base:after {
  border: 13px solid transparent;
  border-top: 13px solid #CBCCCE;
  content: "";
  height: 0;
  left: -13px;
  position: absolute;
  top: 13px;
  width: 0;
}

div.diamond.second-base.active {
  border: 13px solid transparent;
  border-bottom: 13px solid #0066CC;
  box-sizing: border-box;
  clear: both;
  color: #6C6D6F;
  font-family: inherit;
  font-size: 100%;
  font-stretch: inherit;
  font-style: inherit;
  font-variant-caps: inherit;
  font-variant-east-asian: inherit;
  font-variant-ligatures: inherit;
  font-variant-numeric: inherit;
  font-weight: inherit;
  height: 0;
  line-height: inherit;
  margin: 0 auto;
  padding: 0;
  position: relative;
  top: -2px;
  vertical-align: baseline;
  width: 0;
}

div.diamond.second-base.active:after {
  border: 13px solid transparent;
  border-top: 13px solid #0066CC;
  content: "";
  height: 0;
  left: -13px;
  position: absolute;
  top: 13px;
  width: 0;
}

div.diamond.third-base {
  border: 13px solid transparent;
  border-bottom: 13px solid #CBCCCE;
  box-sizing: border-box;
  color: #6C6D6F;
  float: left;
  font-family: inherit;
  font-size: 100%;
  font-stretch: inherit;
  font-style: inherit;
  font-variant-caps: inherit;
  font-variant-east-asian: inherit;
  font-variant-ligatures: inherit;
  font-variant-numeric: inherit;
  font-weight: inherit;
  height: 0;
  line-height: inherit;
  margin: 0 4px 0 0;
  padding: 0;
  position: relative;
  top: -13px;
  vertical-align: baseline;
  width: 0;
}

div.diamond.third-base:after {
  border: 13px solid transparent;
  border-top: 13px solid #CBCCCE;
  content: "";
  height: 0;
  left: -13px;
  position: absolute;
  top: 13px;
  width: 0;
}

div.diamond.third-base.active {
  border: 13px solid transparent;
  border-bottom: 13px solid #0066CC;
  box-sizing: border-box;
  color: #6C6D6F;
  float: left;
  font-family: inherit;
  font-size: 100%;
  font-stretch: inherit;
  font-style: inherit;
  font-variant-caps: inherit;
  font-variant-east-asian: inherit;
  font-variant-ligatures: inherit;
  font-variant-numeric: inherit;
  font-weight: inherit;
  height: 0;
  line-height: inherit;
  margin: 0 4px 0 0;
  padding: 0;
  position: relative;
  top: -13px;
  vertical-align: baseline;
  width: 0;
}

div.diamond.third-base.active:after {
  border: 13px solid transparent;
  border-top: 13px solid #0066CC;
  content: "";
  height: 0;
  left: -13px;
  position: absolute;
  top: 13px;
  width: 0;
}

div.diamond.first-base {
  border: 13px solid transparent;
  border-bottom: 13px solid #CBCCCE;
  box-sizing: border-box;
  color: #6C6D6F;
  float: right;
  font-family: inherit;
  font-size: 100%;
  font-stretch: inherit;
  font-style: inherit;
  font-variant-caps: inherit;
  font-variant-east-asian: inherit;
  font-variant-ligatures: inherit;
  font-variant-numeric: inherit;
  font-weight: inherit;
  height: 0;
  line-height: inherit;
  margin: 0;
  padding: 0;
  position: relative;
  top: -13px;
  vertical-align: baseline;
  width: 0;
}

div.diamond.first-base:after {
  border: 13px solid transparent;
  border-top: 13px solid #CBCCCE;
  content: "";
  height: 0;
  left: -13px;
  position: absolute;
  top: 13px;
  width: 0;
}

div.diamond.first-base.active {
  border: 13px solid transparent;
  border-bottom: 13px solid #0066CC;
  box-sizing: border-box;
  color: #6C6D6F;
  float: right;
  font-family: inherit;
  font-size: 100%;
  font-stretch: inherit;
  font-style: inherit;
  font-variant-caps: inherit;
  font-variant-east-asian: inherit;
  font-variant-ligatures: inherit;
  font-variant-numeric: inherit;
  font-weight: inherit;
  height: 0;
  line-height: inherit;
  margin: 0;
  padding: 0;
  position: relative;
  top: -13px;
  vertical-align: baseline;
  width: 0;
}

div.diamond.first-base.active:after {
  border: 13px solid transparent;
  border-top: 13px solid #0066CC;
  content: "";
  height: 0;
  left: -13px;
  position: absolute;
  top: 13px;
  width: 0;
}



div.circleGraphs {
  border-width: 0;
  box-sizing: border-box;
  color: #6C6D6F;
  float: right;
  font-family: inherit;
  font-size: 100%;
  font-stretch: inherit;
  font-style: inherit;
  font-variant-caps: inherit;
  font-variant-east-asian: inherit;
  font-variant-ligatures: inherit;
  font-variant-numeric: inherit;
  font-weight: inherit;
  line-height: inherit;
  margin: 0;
  overflow: hidden;
  padding: 2px 0 5px;
  vertical-align: baseline;
  width: auto;
}

div.circleGraph.four {
  border-width: 0;
  box-sizing: border-box;
  color: #6C6D6F;
  float: none;
  font-family: inherit;
  font-size: 10px;
  font-stretch: inherit;
  font-style: inherit;
  font-variant-caps: inherit;
  font-variant-east-asian: inherit;
  font-variant-ligatures: inherit;
  font-variant-numeric: inherit;
  font-weight: inherit;
  line-height: 11px;
  margin: 0 6px 5px 0;
  overflow: hidden;
  padding: 0;
  vertical-align: baseline;
  width: 64px;
}

span.abbrev {
  border-width: 0;
  box-sizing: border-box;
  color: #6C6D6F;
  display: block;
  float: left;
  font-family: inherit;
  font-size: 100%;
  font-stretch: inherit;
  font-style: inherit;
  font-variant-caps: inherit;
  font-variant-east-asian: inherit;
  font-variant-ligatures: inherit;
  font-variant-numeric: inherit;
  font-weight: inherit;
  line-height: inherit;
  margin: 0 5px 0 0;
  padding: 0;
}

span.circle.balls.active {
  background-color: #009944;
  border-radius: 10px;
  border-width: 0;
  box-sizing: border-box;
  color: #6C6D6F;
  display: block;
  float: left;
  font-family: inherit;
  font-size: 100%;
  font-stretch: inherit;
  font-style: inherit;
  font-variant-caps: inherit;
  font-variant-east-asian: inherit;
  font-variant-ligatures: inherit;
  font-variant-numeric: inherit;
  font-weight: inherit;
  height: 10px;
  line-height: inherit;
  margin: 0 3px 0 0;
  padding: 0;
  width: 10px;
}

span.circle.balls {
  background-color: #CBCCCE;
  border-radius: 10px;
  border-width: 0;
  box-sizing: border-box;
  color: #6C6D6F;
  display: block;
  float: left;
  font-family: inherit;
  font-size: 100%;
  font-stretch: inherit;
  font-style: inherit;
  font-variant-caps: inherit;
  font-variant-east-asian: inherit;
  font-variant-ligatures: inherit;
  font-variant-numeric: inherit;
  font-weight: inherit;
  height: 10px;
  line-height: inherit;
  margin: 0 3px 0 0;
  padding: 0;
  width: 10px;
}

div.circleGraph {
  border-width: 0;
  box-sizing: border-box;
  color: #6C6D6F;
  float: none;
  font-family: inherit;
  font-size: 10px;
  font-stretch: inherit;
  font-style: inherit;
  font-variant-caps: inherit;
  font-variant-east-asian: inherit;
  font-variant-ligatures: inherit;
  font-variant-numeric: inherit;
  font-weight: inherit;
  line-height: 11px;
  margin: 0 6px 5px 0;
  overflow: hidden;
  padding: 0;
  vertical-align: baseline;
  width: auto;
}

span.circle.strikes.active {
  background-color: #DD0000;
  border-radius: 10px;
  border-width: 0;
  box-sizing: border-box;
  color: #6C6D6F;
  display: block;
  float: left;
  font-family: inherit;
  font-size: 100%;
  font-stretch: inherit;
  font-style: inherit;
  font-variant-caps: inherit;
  font-variant-east-asian: inherit;
  font-variant-ligatures: inherit;
  font-variant-numeric: inherit;
  font-weight: inherit;
  height: 10px;
  line-height: inherit;
  margin: 0 3px 0 0;
  padding: 0;
  width: 10px;
}

span.circle.strikes {
  background-color: #CBCCCE;
  border-radius: 10px;
  border-width: 0;
  box-sizing: border-box;
  color: #6C6D6F;
  display: block;
  float: left;
  font-family: inherit;
  font-size: 100%;
  font-stretch: inherit;
  font-style: inherit;
  font-variant-caps: inherit;
  font-variant-east-asian: inherit;
  font-variant-ligatures: inherit;
  font-variant-numeric: inherit;
  font-weight: inherit;
  height: 10px;
  line-height: inherit;
  margin: 0 3px 0 0;
  padding: 0;
  width: 10px;
}

span.circle.outs.active {
  background-color: #DD0000;
  border-radius: 10px;
  border-width: 0;
  box-sizing: border-box;
  color: #6C6D6F;
  display: block;
  float: left;
  font-family: inherit;
  font-size: 100%;
  font-stretch: inherit;
  font-style: inherit;
  font-variant-caps: inherit;
  font-variant-east-asian: inherit;
  font-variant-ligatures: inherit;
  font-variant-numeric: inherit;
  font-weight: inherit;
  height: 10px;
  line-height: inherit;
  margin: 0 3px 0 0;
  padding: 0;
  width: 10px;
}

span.circle.outs {
  background-color: #CBCCCE;
  border-radius: 10px;
  border-width: 0;
  box-sizing: border-box;
  color: #6C6D6F;
  display: block;
  float: left;
  font-family: inherit;
  font-size: 100%;
  font-stretch: inherit;
  font-style: inherit;
  font-variant-caps: inherit;
  font-variant-east-asian: inherit;
  font-variant-ligatures: inherit;
  font-variant-numeric: inherit;
  font-weight: inherit;
  height: 10px;
  line-height: inherit;
  margin: 0 3px 0 0;
  padding: 0;
  width: 10px;
}

Answer 1

我已经尝试过你的演示代码，并使用内联样式与键 " transform: 'scale(1.5)' " 在您的根标签上。 （在你的情况下是<App/> 标签）

所以，您可以更改 <App style={{tranform:'scale(1.5)',color:'red'}}> 而不是 <App> 要么通过className为此标签添加另一种样式@

ps。括号中的数字代表放大倍数。