如何使用styled-components设置GenericList内部嵌套Popup的样式

你可以通过以下两种方式实现样式修改，核心逻辑都是利用GenericList已经暴露的透传属性，配合styled-components生成的唯一类名匹配目标节点：

方案1：直接透传类名（最推荐，无全局污染） #

GenericList的内部实现已经主动将bodyClassName、contentClassName两个属性透传给了内部Popup组件，同时支持通过popupProps透传所有Popup支持的属性，你可以直接将styled-components生成的类名传入对应属性即可：

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

// 定义popup-body的样式，用css方法直接生成类名更轻便
const customPopupBodyStyle = css`
  /* 此处写入你需要的popup-body样式，示例如下 */
  padding: 16px 24px;
  max-height: 70vh;
  overflow-y: auto;
  background-color: #f8f9fa;
`;

// 如果需要修改popup根节点、content节点的样式，也可以对应生成样式
const customPopupContentStyle = css`
  width: 750px;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.1);
`;

使用时传入GenericList的对应属性即可：

<GenericList
  bodyClassName={customPopupBodyStyle.toString()}
  contentClassName={customPopupContentStyle.toString()}
  popupContent={(
    <CharterPeriodsPopup
      charter={charter}
    />
  )}
/>

该方案和你之前用SCSS写类名的逻辑完全一致，只是类名由styled-components自动生成，天然避免了命名冲突问题。

方案2：带限定的全局样式（适用于Popup挂载到Portal的场景） #

如果你的Popup组件是通过React Portal将DOM挂载到文档根节点，导致子组件作用域样式无法覆盖时，可以用createGlobalStyle创建带唯一前缀的全局样式，避免污染其他组件：

import { createGlobalStyle } from 'styled-components';

// 给目标Popup加唯一类名前缀，避免全局样式污染
const CustomPopupGlobalStyle = createGlobalStyle`
  .custom-charter-popup .popup-body {
    padding: 16px 24px;
    max-height: 70vh;
    overflow-y: auto;
  }
`;

使用时先渲染全局样式组件，再将唯一类名传入Popup根节点：

<>
  <CustomPopupGlobalStyle />
  <GenericList
    popupProps={{
      className: 'custom-charter-popup'
    }}
    popupContent={(
      <CharterPeriodsPopup
        charter={charter}
      />
    )}
  />
</>

内容的提问来源于stack exchange，提问作者Norayr Ghukasyan