如何使用 React 创建圆形/方形形状并在其中包含文本而不使用 SVG 图像？

Question

使用 React 创建圆形和方形形状（可以在其中包含自定义文本而不使用 SVG 图像）的方法是什么？一个例子：

我尝试过以下代码，但它没有呈现任何形状：

import React from 'react';

export default function Circle(){
  return(
    <div height="110" width="500">
      <circle
        cx="50"
        cy="55"
        r="45"
        fill="none"
        stroke="#F0CE01"
        strokeWidth="4"
      />
    </div>
  );
 }

Answer 1

您甚至可以使用div标签来做到这一点。只需添加即可border-radius创建一个圆圈。

反应示例： https: //codesandbox.io/s/shapes-qbf1f

以下是一个快速概述的片段：

.square {
  display: flex;
  width: 100px;
  height: 100px;
  background-color: red;
}

.circle {
  display: flex;
  width: 100px;
  height: 100px;
  background-color: green;
  border-radius: 50%;
}

.text {
  margin: auto;
}

<div class="square">
  <p class="text">Square text</p>
</div>
<div class="circle">
  <p class="text">Circle text</p>
</div>