模态调用自定义样式模态的React样式的组件特异性问题

Question

我正在与React中的样式组件合作。我想在组件中使用以下样式的模态样式，

const StyledModal = styled(Modal)`
.modal-container-header {
    display: none;
}
.modal-container-footer {
    display: none ;
    
}
.modal-container-close {
    display: none;
}

`;

也就是说，我想省略我的自定义模式的全球页脚。它在一种情况下工作正常，但不适用于另一种情况。

这是整个组件，

interface LoaderInterface {
    loading: boolean;
    loadingText?: string;
}

const StyledModal = styled(Modal)`
   .modal-container-header {
        display: none;
    }
    .modal-container-footer {
        display: none ;
      
    }
    .modal-container-close {
        display: none;
    }
`;
const Loader: FC<LoaderInterface> = ({ loading, loadingText }) => {
    console.log("this modal is working");
    return (
        <StyledModal onClose={() => loading === false} open={loading}>
            <div>
                <Loading size="large" />
                <Heading type="h4">{loadingText}</Heading>
            </div>
        </StyledModal>
    );
};

export default Loader;

1. 当通用反应功能组件调用自定义样式模式时，它正在工作
2. ，但是当模态调用此自定义模式时，它无法正常工作。当模态触发自定义模态时，调用模式的样式就会受到影响。但是在调用此自定义模式之前，我关闭了调用模式。

在开发工具中，我总是看到，例如，对于页脚，

.hPyTDi modal-container-footer {
border-top: 1px solid rgba(0,0,0,0.06);
padding: 16px 24px;
text-align: right;
}

这就是全球风格。不是我的自定义风格。当我应用显示时：note在开发工具中的上述代码中显然正在工作。

但是，当我的自定义模式由React功能组件调用时，此问题不会持续。仅当模态（也是React组件）调用此自定义模式时，才出现此问题。

我也尝试了'＆amp;'提高特异性，但行不通。

我做到了，

&.modal-container-footer {
display: none; 
}

这行不通。如果我将自定义模态风格移动到全球位置，则可以运行。但是我不希望这样做，因为这适用于我希望可以看到标头/页脚的所有模式。

真的很挣扎。任何帮助都非常感谢。

Answer 1

我遇到了许多问题，即样式的组件选择器的方式，并意识到将道具传递给它们总是“更安全的”。这是因为SC动态分配类名称的方式。这可能会有所帮助吗？

const StyledModal = styled(Modal)`
  ${ ({ hidden }) => hidden && `
    .modal-container-header, .modal-container-footer, .modal-container-close {
        display: none;
    }
  `}
`;

const Example = () => (
  <StyledModal hidden={()=>someFunction} />
)

对于打字稿，语法相似：

const StyledModal = styled.div<{hidden: boolean}>(...)