css - 使用 flexbox 和 svg(使用 Sandbox) react 星级评分组件

Question

我目前正在构建一个 React 组件以在我的应用中显示星级。

目前正在运行。但不知何故，我只能通过将 SVG 元素包含在 <span> 中来让它工作。标记，这让我有些困扰。它在代码中引入了另一个容器和尺寸，这让我更难在这种情况下推断我的 CSS 尺寸。

我正在使用 styled-components用于 CSS。

下面是我如何渲染 Stars 组件:

App.js

<Stars stars={3.4} />;

Stars.js

import React from "react";
import styled from "styled-components";
import IconStar from "./IconStar";

const S = {};

S.WrapperDiv = styled.div`
  display: flex;
  align-items: center;
`;

S.RatingSpan = styled.span`
  font-size: 1.8rem;
  font-weight: 700;
  padding-right: 5px;
  line-height: 1.8rem;
  font-family: Helvetica, Arial;
`;

S.BackStarsDiv = styled.div`
  display: flex;
  position: relative;
  color: #d3d3d3;
`;

S.FrontDiv = styled.div`
  display: flex;
  position: absolute;
  top: 0;
  overflow: hidden;
  width: ${props => props.rating};
  color: #ffbc0b;
`;

function Stars(props) {
  let rating = 0;

  /* This is to round the rating to closest .5 or .0 */
  if (props.stars) {
    rating =
      (((Math.round((props.stars * 10) / 5) * 5) / 10) * 20).toString() + "%";
  }

  return (
    <React.Fragment>
      <S.WrapperDiv>
        <S.RatingSpan>{props.stars || "N/A"}</S.RatingSpan>
        <S.BackStarsDiv>
          <IconStar />
          <IconStar />
          <IconStar />
          <IconStar />
          <IconStar />
          <S.FrontDiv rating={rating}>
            <IconStar />
            <IconStar />
            <IconStar />
            <IconStar />
            <IconStar />
          </S.FrontDiv>
        </S.BackStarsDiv>
      </S.WrapperDiv>
    </React.Fragment>
  );
}

export default Stars;

IconStar.js

import React from "react";
import styled from "styled-components";

const S = {};

S.span = styled.span`
  width: 1.8rem;
  height: 1.8rem;
`;

S.svg = styled.svg`
  /* display: inline-block;
  vertical-align: middle; */
`;

function IconStar(props) {
  return (
    <S.span>
      <S.svg
        viewBox="0 0 1000 1000"
        width="1.8rem"
        height="1.8rem"
        aria-hidden="true"
      >
        <path
          fill="currentColor"
          d="M10,394.5c0-14.8,10.9-23.9,32.7-27.4l295.4-42.2L471,56.9c7.7-16.2,17.2-24.3,28.5-24.3s21.1,8.1,29.5,24.3l131.9,267.9l295.4,42.2c22.5,3.5,33.8,12.7,33.8,27.4c0,8.4-5.3,17.9-15.8,28.5L760,630.8l50.6,294.3c0.7,2.8,1.1,7,1.1,12.7c0,7.7-2.1,14.4-6.3,20c-4.2,5.6-10.2,8.8-17.9,9.5c-7,0-14.8-2.5-23.2-7.4L499.5,820.7L235.7,959.9c-9.1,4.9-17.2,7.4-24.3,7.4c-7.7,0-13.7-3.2-17.9-9.5c-4.2-6.3-6.3-13-6.3-20c0-2.8,0.4-7,1.1-12.7l50.6-294.3L24.8,423C14.9,412.4,10,402.9,10,394.5L10,394.5z"
        />
      </S.svg>
    </S.span>
  );
}

export default IconStar;

问题

有没有办法摆脱 <span> IconStar.js 的元素并使其直接与 SVG 元素一起使用？不知道为什么，但是当我删除它时，它破坏了我的 CSS。

这是 Code Sandbox与我当前工作的组件。

Answer 1

因为当您删除 span 元素时，您的 svg 正在缩小。为防止这种情况，只需将 flex-shrink: 0; 添加到您的 svg。

https://codesandbox.io/s/rn14mq2ko