Question

我正在尝试使用内部带有文本和图标的基本按钮。这是我现在的代码：

IconNotification.js：

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

const Icon = styled.svg`
  height: ${props => props.height || '24px'};
  width: ${props => props.height || '24px'};
  fill: red
`;

const IconNotification = (props) => {
  console.log(props)
  return (
    <Icon viewBox="0 0 24 24" fill={props.fill}>
      <path d="M12 22c1.1 0 2-.9 2-2h-4c0 1.1.89 2 2 2zm6-6v-5c0-3.07-1.64-5.64-4.5-6.32V4c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5v.68C7.63 5.36 6 7.92 6 11v5l-2 2v1h16v-1l-2-2z" />
    </Icon>
  )
}


export default IconNotification;

ButtonAddAlert.js：

import React from 'react'
import styled from 'styled-components'

import Button from 'components/Button'
import IconNotification from 'components/Icon/IconNotification'

const IconNotificationWithHover = styled(IconNotification)`
  ${Button}:hover & {
    fill: blue
  }
`

const ButtonAddAlert = ({ iconColor }) => (
  <Button>
    Add an alert
    <IconNotificationWithHover />
  </Button>
)

export default ButtonAddAlert

我希望如此：

当我将鼠标悬停在按钮上时，svg图标会改变颜色，但仅限于此特定情况
还可以通过传递道具来更改svg图标颜色（如果我需要在另一个组件中使用相同的图标）

我觉得我没有正确理解样式组件的概念，因为我现在看不到它是如何可能的。

如果你知道我做错了什么，请告诉我！谢谢，

对风格组件概念的误解

0 个答案: