根据不同状态生成不同颜色的边框

const UsernameInput = styled(Input)<InputProps>`
  border: ${(props) => {
    if (props.tip_status === 'error') {
      return '1px #FF878C solid !important';
    } else if (props.tip_status === 'warning') {
      return '1px #87EBFF solid !important';
    }
    if (props.isfocus) {
      return '1px #ffffff solid !important';
    }
    return 'none;';
  }};
`;

根据不同的值生成不同的样式

const StatusDiv = styled.div<{ statusprop: any }>`
  .ant-select {
    height: 24px;
  }
  .ant-select:not(.ant-select-customize-input) .ant-select-selector {
    ${(props) => {
      if (props.statusprop === 1) {
        return {
          background: '#e6eafd',
          color: '#5063c2',
        };
      } else if (props.statusprop === 2) {
        return {
          background: '#e1f6ed',
          color: '#4aae78',
        };
      }
    }};
    border-radius: 22px;
    border: none;
  }
`;

根据传入的table名称不能高度随之变化

const MyProTable = styled(ProTable)<TableProps>`
  .ant-table {
    overflow: scroll;
  }
  .ant-pro-table-list-toolbar-title {
    font-family: SourceHanSansCN-Regular;
    font-size: 16px;
    font-weight: 700;
    color: #5c6280;
  }
  .ant-table .ant-table-content {
    border-left: none !important;
    border-right: none !important;
    table {
      border-top: none !important;
    }
  }
  .ant-table-container {
    height: ${(props) => {
      if (props.pageName === 'role') {
        return `calc(100vh - 190px)`;
      } else if (props.pageName ==='stlConfig') {
        return `calc(100vh - 190px)`;
      } else if (
        ['loginRecord', 'downloadRecord'].includes(props.pageName)
      ) {
        return `calc(100vh - 270px)`;
      } else {
        return `calc(100vh - 240px)`;
      }
    }};
    border: 1px solid #d8dae2;
  }
  a.ant-typography {
    margin-left: 15px;
  }
  .ant-col .ant-form-item-control {
    .ant-space-item > div {
      display: flex;
      margin-bottom: -16px;
      margin-right: -16px;
      button {
        margin-right: 16px;
        margin-bottom: 16px;
      }
    }
  }
`;
export default MyProTable;

全局Modal样式

import { FormProps } from '@ant-design/pro-components';
import { ModalProps } from 'antd';

export const uppModalFormLayout: Omit<FormProps, 'onFinish' | 'title'> & { width: number } = {
  width: 600,
  colon: false,
  layout: 'horizontal',
  labelCol: { span: 6 },
  wrapperCol: { span: 18 },
};

export const udpModalFormProps: Omit<ModalProps, 'visible'> = {
  styles: {
    header: {
      fontSize: '16px',
      color: '#5C6280',
      textAlign: 'center',
      fontWeight: '400',
      padding: '10px',
      boxShadow: 'inset 0 -1px 0 0 #E6E6E6',
    },
    body: {
      padding: '20px',
      boxShadow: 'inset 0 -1px 0 0 #E6E6E6',
    },
    footer: {
      paddingTop: '10px',
    },
  },
  wrapClassName: 'system-modal-form',
};

全局Modal样式使用

<ModalForm
      form={form}
      {...uppModalFormLayout}
      title={getActionText(false, institutionI18n)}
      modalProps={udpModalFormProps}
      open={props.modalVisit}>
      <ProFormField name="Name" label="名称" disabled />
      ......
      </ModalForm>