如何使用TSX转换此样式的组件代码

Question

我是TS的新手，所以这段代码可能看起来很难看：(

import styled, { css } from 'styled-components';
interface defineProps {
readonly left?: boolean;
readonly right?: boolean;
}
interface WrapperProps {
readonly width: number;
readonly maxWidth: number;
defineWrapper: (props: defineProps) => string;
// maybe this code above is the problem?
}
const defineWrapper = (props: defineProps) => {
if (props.right) return rightWrapper;
if (props.left) return leftWrapper;
};
const rightWrapper = css`
border-left: 1px solid ${(props) => props.theme.colors.ink40};
`;
const leftWrapper = css`
border-right: 1px solid ${(props) => props.theme.colors.ink40};
`;
export const Wrapper = styled.div<WrapperProps>`
display: flex;
flex-direction: column;
width: ${({ width }) => width && `${width}vw`};
max-width: ${({ maxWidth }) => `${maxWidth}px`};
height: 100vh;
background-color: ${(props) => props.theme.colors.body50};
${defineWrapper}  // 👈👈 ERROR!
`;

我读过一些博客文章，但没有这样的。😥我想保留${defineWrapper}代码，因为我在JSX中经常使用这些东西。

任何帮助都将不胜感激！谢谢

Answer 1

使用样式化的宽度道具系统怎么样？请在这里阅读

import React, { ReactNode } from 'react';
import styled, { css } from 'styled-components';
import { width, maxWidth, WidthProps } from 'styled-system';
interface ContainerProps extends React.HTMLAttributes<HTMLDivElement> {
readonly left?: boolean;
readonly right?: boolean;
}
type Props = ContainerProps &
WidthProps & {
children: ReactNode;
};
const defineWrapper = (props: ContainerProps) => {
if (props.right) return rightWrapper;
if (props.left) return leftWrapper;
};
const rightWrapper = css`
border-left: 1px solid ${props => props.theme.colors.ink40};
`;
const leftWrapper = css`
border-right: 1px solid ${props => props.theme.colors.ink40};
`;
const Container = styled.div<ContainerProps>`
display: flex;
flex-direction: column;
${width};
${maxWidth};
height: 100vh;
background-color: ${props => props.theme.colors.body50};
${defineWrapper}// 👈👈 ERROR!
`;
const StyledDiv: React.FC<Props> = ({ children }) => {
return <Container>{children}</Container>;
};
StyledDiv.defaultProps = {
// default props here
};
export default StyledDiv;