1

我正在尝试做一个带有文本和图标的基本按钮。这是我现在的代码：

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 的概念，因为我现在不明白它是如何实现的。

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

4

1 回答 1

0

有几件事：

  • fill可以由样式化组件处理。

  • IconNotification应该在内部引用Button而不是相反，因为它的样式取决于Button状态。这是 JS 中 CSS 的常见模式。

图标.js

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

按钮.js

import Icon from "./Icon";

const Button = styled.button`
  &:hover > ${Icon}${Icon} { // twice for specificity
    fill: blue;
  }
`;

这是代码沙箱的链接，因此您可以使用它：https ://codesandbox.io/s/n370mljrqp

于 2018-05-09T10:54:11.507 回答