如何控制 svg 元素的宽度和高度

Question

我创建了一个具有自定义宽度和高度的 div 包装器，然后将 SVG 放在包装器内，但宽度和高度没有被修改，在这种情况下如何控制宽度和高度？

export const SvgWrapper = styled.div`
  width: ${(props) => props.width && props.width};
  height: ${(props) => props.height && props.height};
  padding-bottom: ${(props) => props.paddingBottom && props.paddingBottom};
`;

Answer 1

与普通 CSS 一样，您需要使用 CSS 选择器来定位 SVG 选择器，您当前仅应用div元素

export const SvgWrapper = styled.div`
  svg {
    width: ${(props) => props.width};
    height: ${(props) => props.height };
    padding-bottom: ${(props) => props.paddingBottom};
  }
`;