Question

我正在尝试使用flex实现以下目标。处理此问题的最佳方法是什么？我发现很难分隔两个文本字段（文本&& secondaryText）之间的空白

popper: createStyles({
        root: {
            backgroundColor: white,
            borderRadius: 4,
            boxShadow: "0 2px 12px 0 rgba(0, 0, 0, 0.5)",
            zIndex: 1301,
            maxHeight: 200,
            overflowY: "auto",
            display: "flex",
            flexDirection: "column",
        },
    }),
};

<Popper
       className={toClassName(classes.popper)}
       >             
         {children} // Component AutocompleteSelection
</Popper>

const AutocompleteSelection: FC<AutocompleteSelectionProps> = ({
    text,
    secondaryText,
}): JSX.Element => {
    const classes = useMakeStyles(baseStyles) as Properties;
    return (
        <ListItem styles={listItem}>
            <Typography classes={classes.typography}>
                {text}
                {secondaryText}
            </Typography>
        </ListItem>
    );
};

const baseStyles: Properties = {
    listItem: createStyles({
        root: {
            "&:hover": {
                backgroundColor: greyTwo,
            },
        },
    }),
    typography: createStyles({
        root: {
            fontSize: 14,
            lineHeight: 1,
        },
    }),
};

Answer 1

Ciao，要在secondaryText显示中显示right浮动flex，可以在marginLeft: "auto"类中使用secondayText，例如：

  <Typography class={classes.typography}>
    <Typography class={classes.text}>{"hello"}</Typography>
    <Typography class={classes.secondaryText}>{"there"}</Typography>
  </Typography>

和样式：

const useStyles = makeStyles((theme) => ({
  typography: {
    display: "flex"
  },
  text: {},
  secondaryText: {
    marginLeft: "auto"  // secondary text floated to right
  }
}));

Here一个代码框示例。

材质UI Popper样式

1 个答案: