reactjs 如何根据活动状态更改样式组件中的颜色？

我有一个react accordion组件，我需要根据活动状态和非活动状态更改样式。我已经设置了状态，还添加了颜色和活动颜色的两个 prop 。当用户单击title div时，颜色应该会发生变化。到目前为止，我在jsx中添加了条件，但不确定如何在样式化组件上正确地设置样式？我已经定义了颜色的主题，因此它们将是“主”的。“中性”，“灰色”我也用故事书来显示它们，所以我需要用颜色来显示默认值。这里你可以看到我的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={isActive ? activeColor : 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: "neutrals",
  activeColor: "neutrals",
}
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: ${props => props.theme.primary};
  background-color: ${props => props.theme.grey};
`

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;
  color: ${props => props.theme.neutrals};
  background-color: ${props => props.theme.grey}
`

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

这是故事书中的布局：

<Canvas>
  <Story
    name="Overview - black with button"
    args={{
      icon: "arrowDown",
      icon: "arrowUp",
      text: "Fundacja",
      button: (
        <Button
          text="Button ->"
          variant="textLine"
          size="small"
          href="https://google.com"
        />
      ),
    }}
  >
    {TextTemplate.bind()}
  </Story>
</Canvas>
export const TemplateGrid = (args) => (
 <div
    style={{
    }}
  >
  <Accordion {...args}>
      <div>
      <div>O nas</div>
      <div>Aktualności</div>
      <div>Opinie</div>
      <div>Partnerzy</div>
      <div>Umowa</div>
      </div>
    </Accordion>
  </div>
)
export const TextTemplate = (args) => (
  <div
    style={{
    }}
  >
  <Accordion {...args}>
      <p>
          Odpowiedz
      </p>
    </Accordion>
  </div>
)```

Here is basically how those two layouts look like: [![enter image description here][1]][1]
[![enter image description here][2]][2]
[![enter image description here][3]][3]
[![enter image description here][4]][4]

  [1]: https://i.stack.imgur.com/ek1pH.png
  [2]: https://i.stack.imgur.com/mXpNw.png
  [3]: https://i.stack.imgur.com/AjGkS.png
  [4]: https://i.stack.imgur.com/0AKCk.png

I basically wish to switch the color, so when unhiden they have black background and white font. Can you help in this?

我使用了一些示例组件来显示这一点，而不是使用精确的示例。您可以在样式组件中使用三元运算来显示您想要的颜色，并反映状态变化来改变其颜色。
例如，我在下面创建了一个h1样式的组件示例：

const StyledText = styled.h1`
  color: ${(props) => (props.color ? props.color : 'gray')};
`;

在上面的组件中，如果有一个color prop ，它将显示颜色，否则默认为灰色（或者你可以得到你的主题的颜色）。然后整个组件将是这样的：

import { useState } from 'react';
import styled from 'styled-components';

const StyledText = styled.h1`
  color: ${(props) => (props.color ? props.color : 'gray')};
`;

const Text = ({ children, activeColor, regularColor }) => {
  const [isActive, setIsActive] = useState(false);

  const handleClick = () => {
    setIsActive(!isActive);
  };

  return (
    <div>
      <StyledText color={isActive ? activeColor : regularColor}>
        {children}
      </StyledText>
      <button onClick={handleClick}>Change Active</button>
    </div>
  );
};

export default Text;

我创建了一个handleClick，它在单击按钮时切换activeState，StyledText的颜色属性将根据activeState而改变。如果状态是活动的，它将显示activeColor，否则它将显示regularColor。然后在父组件中，我传递了activeColor和regularColor。父组件如下：

import Text from './components/Text';

function App() {
  return (
    <Text activeColor="#ff0000" regularColor="#F5F5DC">
      Hello World!
    </Text>
  );
}

export default App;

reactjs 如何根据活动状态更改样式组件中的颜色？

1条答案

相关问题

热门标签

最新问答