我怎样才能改变在css中使用prop over transform选项制作的图标？

xxb16uws 于 2023-01-10 发布在其他

关注(0)|答案(2)|浏览(137)

我有一个定义了主题和图标的React accordion 组件。我需要通过样式组件和故事书中的转换选项来更改图标。
同样，在单击时，标题div和内容div的背景色需要更改。
我已经定义了颜色 prop 和图标，但不确定下一步是什么？
下面是我的React组件：

import { string, node, oneOf, bool } from "prop-types"
import * as Styled from "./Accordion.styled"
import Icon from "design-system/components/icon"
import React, { useState } from 'react'

const Accordion = ({ children, icon, text, button,
  color, activeColor, }) =>  {
  const [isActive, setIsActive] = useState(false);
  return (
  <Styled.Accordion
  color={color}
  >
    <Styled.Title onClick={() => setIsActive(!isActive)}
    color={isActive ? activeColor : color}
    > {text}
    <Styled.Icon color={color}>
    <Icon name={icon}/>
    </Styled.Icon> 
    </Styled.Title>
    {isActive &&
    <Styled.Content
    color={isActive ? activeColor : color} >
    {children} 
    {button}
    </Styled.Content>
    }
  </Styled.Accordion>
);
}

Accordion.propTypes = {
  text: string.isRequired,
  children: node.isRequired,
  icon: string,
  name: string,
  button: node,
  color: oneOf(["primary", "neutrals", "grey"]),
  activeColor: oneOf(["primary", "neutrals", "grey"]),
}

Accordion.defaultProps = {
  children: null,
  icon: null,
  name: null,
  button: null,
  color: "",
  activeColor: "",
}

export default Accordion

这是他们的风格

import styled from "@emotion/styled"
import { css } from "@emotion/react"

export const Accordion = styled.div`
 display: flex;
 text-decoration: none;
 width: auto;
 height: auto;
 flex-direction: column;
 align-items: flex-start;
 justify-content: start;
 border-radius: 30px;
 `
export const Title = styled.div`
  width: auto;
  height: auto;
  display: inline-flex;
  gap: 161px;
  border-radius: 10px 10px 0px 0px;
  padding: 10px 0px 0px 10px;
  color: ${({ color, theme }) => {
  switch (color) {
    case "grey":
      return theme.colors.grey[600]
    case "neutrals":
      return theme.colors.neutrals[100]
    case "primary":
      return theme.colors.primary[500]
    default:
      return theme.colors.grey[600]
  };
}};
background-color: ${({ color, theme }) => {
  switch (color) {
    case "grey":
      return theme.colors.grey[600]
    case "neutrals":
      return theme.colors.neutrals[100]
    case "primary":
      return theme.colors.primary[500]
    default:
      return theme.colors.grey[600]
  }
}};
`

export const Content = styled.div`
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: start;
  width: auto;
  height: auto;
  border-radius: 0px 0px 10px 10px;
  padding: 10px 100px 0px 10px;
  background-color: ${({ color, theme }) => {
    switch (color) {
      case "grey":
        return theme.colors.grey[600]
      case "neutrals":
        return theme.colors.neutrals[100]
      case "primary":
        return theme.colors.primary[500]
      default:
        return theme.colors.grey[600]
    }
  }};
  color: ${({ color, theme }) => {
    switch (color) {
      case "grey":
        return theme.colors.grey[600]
      case "neutrals":
        return theme.colors.neutrals[100]
      case "primary":
        return theme.colors.primary[500]
      default:
        return theme.colors.grey[600]
    }
  }};
`

  export const Icon = styled.div`
  display: flex;
  align-items: flex-start;
  width: auto;
  height: auto;
  `

css

来源：https://stackoverflow.com/questions/75051296/how-can-i-change-the-icon-made-with-prop-over-transform-option-in-css

2条答案

按热度按时间

iyfjxgzm1#

我看到你已经把icon作为一个属性传递给这个组件了，如果你想改变点击时的图标，你可以创建一个状态并将其设置为初始值，然后在你喜欢的时候更新它。

const [icon, setIcon] = useState(props.icon);

(you可以通过向上提升状态并从父函数向下传递附加的单击处理程序来避免使用prop作为初始值）
然后你可能需要为icon div创建一个onClick方法来设置这个图标：

const changeIcon = () => {
    // some logic to select an updated icon
    setIcon(newIcon);
}

或者你可以只传递一个图标给这个方法

const changeIcon = newIcon => {
    setIcon(newIcon);
}

并将其分配给所述div：

return (
    ...
    <Styled.Icon onClick={changeIcon}>
        <Icon name={icon} />
    </Styled.Icon>
    ....
);

要在单击“background”时执行任何操作，可以为Accordion组件（或任何希望在其上执行此行为的组件的背景）分配一个类似的单击侦听器。如果不希望在单击此背景顶部的元素时发生任何事件，可以使用event.stopPropagation()停止此事件传播，其中event会自动传递给单击处理程序：

return (
    <SomeElement onClick={event => event.stopPropagation()} />
);

我希望这能回答您的问题。考虑复习一下the short React tutorial，它涵盖了React的基础知识，包括何时使用State。

赞(0）回复(0）举报 2023-01-10

afdcj2ne2#

用单击更改图标
假设您从props中获得了一个“活动图标”，那么只需根据isActive的状态进行切换即可：

const Accordion = ({
  icon,
  activeIcon,
}) => {
  const [isActive, setIsActive] = useState(false);

  return (
    <Styled.Title onClick={() => setIsActive(!isActive)}>
      <Styled.Icon>
        {/* Provide the desired name prop value depending on state */}
        <Icon name={isActive ? activeIcon : icon}/>
      </Styled.Icon>
    </Styled.Title>
  );
};

标题di[v]和内容div的背景色需要更改
......可能：
样式化元件中的“通过变换”选项
为此，确实可以使用基于 prop 的样式化组件调整：

const Accordion = ({
  color,
  activeColor,
}) => {
  const [isActive, setIsActive] = useState(false);

  return (
    <Styled.Title
      onClick={() => setIsActive(!isActive)}
      color={isActive ? activeColor : color}
    >
    </Styled.Title>
  );
};

// Accordion.styled
export const Title = styled.div`
  // Adapt the bgColor value based on color prop
  background-color: ${(props) => props.color};
`;

赞(0）回复(0）举报 2023-01-10

我来回答

我怎样才能改变在css中使用prop over transform选项制作的图标？

2条答案

相关问题

热门标签

最新问答