Material UI 波普尔样式

Question

What I'm trying to achieve

What I currently have

我正在尝试使用 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，要在 flex 显示中显示 secondaryText 浮动 right，可以在 secondayText class 中使用 marginLeft: "auto"，例如：

  <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 一个 codesandbox 示例。

Material UI 波普尔样式

Material UI Popper Styling

css

styling

flexbox

material-ui

popper.js