如何在样式化组件中将className传递给svg

Question

我一直在尝试通过样式化组件对svg图标组件进行样式设置，但遇到了一些问题，但是它不起作用。我应用于关闭图标的样式没有得到应用

import styled from 'styled-components'
import Close from './close.svg'

const CloseIcon = ({ className , ...props }) => <Close {...props} className={className} />

const styledCloseIcon = styled(CloseIcon)`
  &.ui.modal {
    .modal-icon-close {
      width: 14px;
      height: 24px;
      fill: black;
      top: 12px;
      right: 14px;
    }
  }
`
export default styledCloseIcon

close.svg

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
    <path d="M13.627 12.213l9.9 9.9-1.414 1.414-9.9-9.9-9.9 9.9L.9 22.113l9.9-9.9-9.9-9.9L2.314.9l9.9 9.9 9.899-9.9 1.414 1.415-9.9 9.9z"/>
</svg>

此关闭图标用于语义ui react modal https://react.semantic-ui.com/modules/modal/#variations-close-icon

<Modal
      size='small'
      open={true}
      closeIcon={<Close className='modal-icon-close'/>}
      closeOnDimmerClick={false}
      className={classNames(className)}
      >

Answer 1

调用styled(CloseIcon)时，您已经在设置SVG的样式，因为自定义组件接受className属性，因此styled-components可以注入className并仅呈现SVG图标。

尝试省略所有嵌套的类名，然后直接应用样式。

这里是一个例子，

import React from "react";
import ReactDOM from "react-dom";

import styled from "styled-components";
import { ReactComponent as Close } from "./close.svg";

const CloseIcon = ({ className, ...props }) => (
  <Close {...props} className={className} />
);

const StyledCloseIcon = styled(CloseIcon)`
  width: 30px;
  height: 30px;
  fill: #ee4845;
`;

const App = () => {
  return (
    <div>
      <StyledCloseIcon />
    </div>
  );
};

在codesandbox中工作的演示<​​/ p>

Answer 2

问题

我认为有两个问题

1. import Close from './close.svg';不是有效的React组件
2. 在样式化的组件中嵌套类

解决方案

首先创建一个适当的SVG react组件

const CloseIcon = ({ className, ...props }) => (
  <svg
    xmlns="http://www.w3.org/2000/svg"
    viewBox="0 0 24 24"
    {...props}
    className={className}
  >
    <path d="M13.627 12.213l9.9 9.9-1.414 1.414-9.9-9.9-9.9 9.9L.9 22.113l9.9-9.9-9.9-9.9L2.314.9l9.9 9.9 9.899-9.9 1.414 1.415-9.9 9.9z" />
  </svg>
);

第二次将modal-icon-close设为样式化组件中的顶级类

const StyledCloseIcon = styled(CloseIcon)`
  &.modal-icon-close {
    width: 14px;
    height: 24px;
    fill: black;
    top: 12px;
    right: 14px;
  }
`;

对我来说没有什么意义，为什么为什么要内化类名和CSS，然后仍然要求传递正确的类名prop？您还可以通过使用className

指定.attrs道具来简化组件

const StyledCloseIcon = styled(CloseIcon).attrs(() => ({
  className: 'modal-icon-close',
}))`
  &.modal-icon-close {
    width: 14px;
    height: 24px;
    fill: black;
    top: 12px;
    right: 14px;
  }
`;

或者只是完全消除类名

const StyledCloseIcon = styled(CloseIcon)`
    width: 14px;
    height: 24px;
    fill: black;
    top: 12px;
    right: 14px;
`;