как передать className в svg в стилизованных компонентах - PullRequest
Новая
       22

как передать className в svg в стилизованных компонентах

0 голосов
/ 10 июля 2020

Я пытался стилизовать компонент значка 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>

Этот значок закрытия используется в semanti c 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)}
      >

Ответы [ 2 ]

1 голос
/ 10 июля 2020

Проблемы

Я думаю, что есть пара проблем

  1. import Close from './close.svg'; не является допустимым компонентом реакции
  2. Разложите класс в стилизованном компоненте

Решение

Сначала создайте правильный компонент реакции SVG 

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>
);

Второй make modal-icon-close класс верхнего уровня в стилизованном компоненте 

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

Отредактируйте, как передать className в svg в стилизованных компонентах

Что для меня не имеет особого смысла, так это зачем усваивать имя класса и CSS, а затем все равно требовать передачи правильного имени класса? Вы можете упростить компонент, также указав опору 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;
`;
1 голос
/ 10 июля 2020

Когда вы вызываете styled(CloseIcon), вы уже стилизуете SVG, потому что пользовательский компонент принимает className prop, поэтому 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>
  );
};

Рабочая демонстрация в codeandbox

...