如何将相同样式的组件模式应用于已经存在的多个 svg 组件？

Posted 2023-03-15

【中文标题】如何将相同样式的组件模式应用于已经存在的多个 svg 组件？

【英文标题】：How can I apply the same styled components pattern to multiple svg components which already exist?

【发布时间】：2021-09-11 23:04:57

【问题描述】：

我已经看到如何将相同的样式用于多个组件（如 here 所示），方法是根据之前制作的组件制作一个组件，但同样的逻辑似乎不适合我的情况。

我像这样导入了我的 svg：

import  ReactComponent as UpsetEmoticon  from '../images/upset-emoticon.svg';

并使用样式组件来改变悬停颜色，如下所示：

const UpsetEmoticonStyled = styled(UpsetEmoticon)`
    & path 
        fill: white;
    
    &:hover 
        & path 
            fill: gray;
        
    
`;

我想将相同的样式应用于我以相同方式导入的多个 svg。我可以多次重复代码，将 styled() 中的 SVG 换掉，但如果有更简洁的方法，我会更喜欢。提前谢谢！

【参考方案1】：

有几种方法可以解决这个问题。

如果它们在同一层次结构中，您可以将样式提升到一个共同的祖先

const Wrapper = styled.div`
  svg 
    & path 
      fill: white;
    
    &:hover 
      & path 
        fill: gray;
      
    
  
`;

export default function App() 
  return (
    <Wrapper>
      <IconA />
      <IconB />
    </Wrapper>
  );

使用 styled-component 的 as 属性

const StyledIcon = styled.svg`
    & path 
      fill: blue;
    

    &:hover 
      & path 
        fill: gray;
      
    
`;

export default function App() 
  return (
    <div>
      <StyledIcon as=IconA />
      <StyledIcon as=IconB />
    </div>
  );