样式 Modal.method() Ant Design 与样式化组件

Question

我正在尝试某种方法来设计 Ant Design 模式的以下方法：

• Modal.info
• 模态警告
• 模态.成功
• 模态错误

默认组件通常使用以下属性设置样式：

const StyledModal = styled(ModalAntd)`
  & .ant-btn-default {
    background-color: ${props => props.theme.color.neutral[400]};
    color: ${props => props.theme.color.neutral[100]};
    border: 1px solid ${props => props.theme.color.neutral[400]};
    border-radius: 4px;
    width: 60px;
    height: 40px;
  }

  & .ant-btn-primary {
    background-color: ${props => props.theme.color.brand.primary};
    color: ${props => props.theme.color.neutral[100]};
    border: 1px solid ${props => props.theme.color.brand.primary};
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15);
    border-radius: 4px;
    width: 60px;
    height: 40px;
  }

  & .ant-modal-body {
    color: ${props => props.theme.color.neutral[500]};
    font-size: 16px;
  }

  & .ant-modal-title {
    font-weight: 600;
    color: ${props => props.theme.color.neutral[1000]};
    font-size: 20px;
  }

  & .ant-modal-confirm-info {
    background-color: red;
  }
`;

并以以下格式返回：

function AlertModals({ title, visible, onOk, onCancel, children, ...props }) {
  return(
    <StyledModal {...props} okText="Sim" cancelText="Não" title={title} visible={visible} onOk={onOk} onCancel={onCancel}>
    {children}
    </StyledModal>
  )
};

但问题是，当我尝试使用我需要的方法时，它们不会受到样式的影响

function Info({title, content}) {
  styledInfo.info({
    title,
    content,
  })
};  

function Warning({title, content}) {
  StyledModal.warning({
    title,
    content,
  })
};

function Success({title, content}) {
  StyledModal.success({
    title,
    content,
  })
};

function Error({title, content}) {
  StyledModal.error({
    title,
    content,
  })
};

AlertModals.Warning = Warning;
AlertModals.Success = Success;
AlertModals.Error = Error;
AlertModals.Info = Info;

export default AlertModals;

总结我的问题，如何设置方法的样式，因为方法是一个函数，而不是我可以使用样式化组件设置样式的组件

Answer 1

我今天遇到了同样的问题，我只能通过直接使用样式组件中的 globalStyles 进行样式化来解决它，我会给你一个我更改的示例，我希望它对你有帮助。

import { createGlobalStyle } from 'styled-components'
import breakpoints from '../../theme/breakpoints'

const GlobalStyle = createGlobalStyle`
  @media(max-width: ${breakpoints.TABLET_MEDIUM}px) {
    .ant-modal-confirm-btns {
      display: flex;
    }
    .ant-modal-confirm-btns button{
      width:100%;
    }
  }

  @media(max-width: ${breakpoints.MOBILE_LARGE}px){
    .ant-modal-confirm-btns {
      display: flex;
      flex-direction: column;
    }
    
    .ant-modal-confirm .ant-modal-confirm-btns .ant-btn + .ant-btn{
      margin-top: 8px;
      margin-bottom: 0;
      margin-left: 0;
    }
  }
`

export default GlobalStyle