材质UI Popper样式

问题描述

What I'm trying to achieve

What I currently have

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

popper: createStyles({
        root: {
            backgroundColor: white,borderRadius: 4,boxShadow: "0 2px 12px 0 rgba(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,};

解决方法

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一个代码框示例。