Материал UI Popper Styling

Question

Чего я пытаюсь достичь

Что у меня сейчас есть

Я пытаюсь добиться следующего, используя flex. Как лучше всего справиться с этим? Мне трудно разделить пробел между двумя текстовыми полями (text && 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
  }
}));

Вот пример codeandbox.