在 Styled-Components 中重写 CSS答案

【问题标题】：Re-writing CSS in Styled-Components在 Styled-Components 中重写 CSS
【发布时间】：2022-08-06 00:03:30
【问题描述】：

我目前正在研究一个涉及下拉菜单的项目，并且正在学习教程。我遇到的一个问题是下拉显示的动态样式。

<ul className={`dropdown ${dropdown ? \"show\" : \"\"}`}>

这是教程中的代码，我的问题是如何使用样式组件重写它。

// my Dropdown component

const Dropdown = ({ submenus, dropdown }) => {
  return (
    <StyledDropdown dropdown={dropdown}>
      {submenus.map((submenu, index) => (
        <li key={index}>
          <a href=\"/\">{submenu.title}</a>
        </li>
      ))}
    </StyledDropdown>
  );
};

export default Dropdown;

//styling of dropdown

export const StyledDropdown = styled.ul``;

标签： css reactjs styled-components

【解决方案1】：

您可以在样式化组件中获取道具

import styled, { css } from 'styled-components'

export const StyledDropdown = styled.ul`
  ${props => props.dropdown ? css`
    // Style for show
  ` : ''}
`;

【讨论】：