Styled-Components TypeScript Help

styled-ts.js

const StyledAlert = styled.div`
  padding: 13px 24px;
  line-height: 1;
  margin-bottom: 1rem;
  font-size: 15px;
  border: 1px solid transparent;
  border-radius: 4px;
  a {
    color: #aaeaf4;
    text-decoration: underline;
    margin: 0 8px;
    &:hover,
    &:focus {
      color: #aaeaf4;
    }
  }

  ${props => {
    if (props.isAttachable) {
      return css`
        margin-bottom: -2px;
        position: relative;
        z-index: 100;
        border-bottom-right-radius: 0;
        border-bottom-left-radius: 0;
      `;
    }
  }};
  ${props => {
    if (props.status === 'success') {
      return css`
        background: #48c076;
        color: white;
      `;
    } else if (props.status === 'info') {
      return css`
        background: #7a81cc;
        color: white;
      `;
    } else if (props.status === 'warning') {
      return css`
        background: #fff4e6;
        border: 1px solid #ffd8a8;
        color: #e8590c;
      `;
    } else if (props.status === 'error') {
      return css`
        background: #e85dac;
        color: white;
      `;
    }
  }};
`;