将文本向左对齐/在材质 ui 框中的 div 内开始

Posted 2023-02-22

【中文标题】将文本向左对齐/在材质 ui 框中的 div 内开始

【英文标题】：Align text to left/start within a div within a material ui Box

【发布时间】：2021-11-16 11:03:10

【问题描述】：

我正在尝试让该字段的错误处理 ui 像该字段的错误处理 ui 一样呈现

请注意，在正确的（第二个）ui 示例中，错误文本显示在左侧。暂时忽略文本颜色或文本字体 - 如何使该死的文本（“资产包 url 无效....”）向左对齐？

我目前的风格

hr: 
    border: '1px solid red'
  ,
  errorDiv: 
    align: "left",
    flexDirection: 'column',
  

以及它在代码中的使用位置

<Box>
        <label htmlFor="contained-button-file">
          <Button
            size="small"
            variant='outlined'
            color='default'
            onClick=() => 
              // eslint-disable-next-line
              (uploadInputRef?.current as any)?.click();
            
          // disabled=isDisabled ? true : false
          >
            url ? 'Change Asset Bundle' : 'Add Asset Bundle'
          </Button>
        </label>
        error ? (
          <div className=classes.errorDiv>
            <hr className=classes.hr></hr>
            error
          </div>
        ) : null
      </Box>

Box 被包裹在一个无样式的 div 中。该组件被包装在上一层的 Grid 项组件中。

【参考方案1】：

哎呀，我明白了。

用过梅FormHelperText！ （我仍然低估了 MUI 的广度。）

import FormHelperText from '@mui/material/FormHelperText';

...

<Box>
  <label htmlFor="contained-button-file">
    <Button
      size="small"
      variant='outlined'
      color='default'
      onClick=() => 
        // eslint-disable-next-line
        (uploadInputRef?.current as any)?.click();
      
      // disabled=isDisabled ? true : false
      >
    url ? 'Change Asset Bundle' : 'Add Asset Bundle'
    </Button>
  </label>
  error ? (
    <div className=classes.errorDiv>
      <hr className=classes.hr></hr>
      <FormHelperText >error</FormHelperText>
    </div>
  ) : null
</Box>