Javascript React中数字时钟边界的创建

我试图在React中创建一个数字时钟，在这里你可以增加或减少分秒。我混合使用了React引导布局和材质UI图标（

ArrowDropUpIcon

，

ArrowDropDownIcon

）。以下是JSX：

             <Container>
                <Row>
                  <Col xs lg="2">
                    <Row>
                      <Button
                        className="btn btn-primary btn-sm"
                        onClick={() => adjustTimer("incMinutes")}
                      >
                        <ArrowDropUpIcon
                          style={{
                            display: "flex",
                            justifyContent: "center",
                            fontSize: 10,
                          }}
                        />
                      </Button>
                    </Row>
                    <Row>
                      <Button
                        className="btn btn-primary btn-sm"
                        onClick={() => adjustTimer("decMinutes")}
                      >
                        <ArrowDropDownIcon
                          style={{
                            display: "flex",
                            justifyContent: "center",
                            fontSize: 10,
                          }}
                        />
                      </Button>
                    </Row>
                  </Col>
                  <Col md="auto">
                    {("0" + Math.floor((time / 60000) % 60)).slice(-2)}:
                    {("0" + Math.floor((time / 1000) % 60)).slice(-2)}
                  </Col>
                  <Col xs lg="2">
                    <Row>
                      <Button
                        className="btn btn-primary btn-sm"
                        onClick={() => adjustTimer("incSeconds")}
                      >
                        <ArrowDropUpIcon
                          style={{
                            display: "flex",
                            justifyContent: "center",
                            fontSize: 10,
                          }}
                        />
                      </Button>
                    </Row>
                    <Row>
                      <Button
                        className="btn btn-primary btn-sm"
                        onClick={() => adjustTimer("decSeconds")}
                      >
                        <ArrowDropDownIcon
                          style={{
                            display: "flex",
                            justifyContent: "center",
                            fontSize: 10,
                          }}
                        />
                      </Button>
                    </Row>
                  </Col>
                </Row>
              </Container>

调整计时器（“增量分钟”）}
>

但当我使用chrome开发工具切换到不同的设备（手机/平板电脑）时，问题就来了


我想创建一个全天候显示时间和递增/递减按钮的边框，以创建一个实际的时钟组件。我不知道该怎么做