我正在尝试做一个带有文本和图标的基本按钮。这是我现在的代码:
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 图标颜色(如果我需要在另一个组件中使用相同的图标)
我觉得我没有正确理解 styled-components 的概念,因为我现在不明白它是如何实现的。
如果你知道我做错了什么,请告诉我!谢谢,