在我的react ts項目中，我必須創(chuàng)建一個必須在卡內(nèi)使用的共享組件。由于我對css一點都不熟悉，我很難創(chuàng)建這個紅色高亮組件，它將文本作為道具傳遞。 紅色組件元素

到目前為止，我像這樣創(chuàng)建了RedComponent.tsx:

import React from 'react';
import './RedComponent.css';

interface RedComponentProps {
  text: string;
}

const RedComponent: React.FC<RedComponentProps> = ({ text }) => {

  return (
    <div className="redComponent-wrapper">
      <div className="triangle"></div>
      <div className="redComponent">
        <div className="text">{text}</div>
      </div>
    </div>
  );
};

export default RedComponent;

就像一個三角形，緊挨著一個矩形，里面有文字。

這是RedComponent.css

.redComponent-wrapper {
    position: absolute;
    top: 0;
    left: 0;
  }
  
  .redComponent{
    display: inline-block;
    padding: 0.35em 0.75em;
    font-size: 1rem;
    letter-spacing: 1.33px;
    text-transform: uppercase;
    background-color: #ff0000;
  }
  
  .triangle{
    content: '';
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 32px 16px 0 0;
    border-color: #ff0000 transparent transparent transparent;
    right: 155px;
    top: 0;
    position: absolute;
    transform: rotateY(180deg);
    }

很接近了，但這根本不是我們想要的結果。

你能建議如何創(chuàng)建紅色組件嗎？

如果不強制只使用CSS創(chuàng)建形狀，我建議看看SVG。您可以簡單地使用一個或兩個SVG元素來繪制您喜歡的形狀。帶文本的基本示例:

<svg width="300" height="50">
   <polygon points="0,0 300,0 300,50 50,50" style="fill:red;stroke:red;stroke-width:1;" />
   <text fill="#ffffff" font-size="40" font-family="Verdana" x="100" y="40">SVG</text>
</svg>