Question

能否请您告诉我如何在不更改标签位置的情况下显示错误弹出窗口。如果从组件中删除下面的行，则会在输入字段上方显示标签。但是当我们添加此行时，它将占用空间并在标签和输入字段之间插入。< / p>

`

error={{ content: 'Please enter your first name', pointing: 'below' }}

https://codesandbox.io/s/semantic-ui-react-example-h4sql

我尝试使用此CSS删除它，但它更改了所有工具提示的位置。

/* .error.field  .ui.pointing{
position: absolute;
top:-10px
} */

`

Answer 1

您的CSS只需更具体一些即可定位正确的类。另外，您应该尝试避免像这样全局定位类，因为您可能会无意中影响不需要此样式的其他标记。特异性至关重要。

另外，要使您的样式更加具体且不易出错，请给每个Form.Input自己的类。

Example.js

import React from "react";
import { Form } from "semantic-ui-react";

const FormExampleFieldErrorLabel = () => (
  <Form>
    <Form.Input
      className="first-name"
      error={{ content: "Please enter your first name", pointing: "below" }}
      fluid
      label="First name"
      placeholder="First name"
    />

    <Form.Input
      className="last-name"
      error={{
        content: "Please enter your last name",
        pointing: "below"
      }}
      fluid
      label="Last name"
      placeholder="Last name"
    />

    <Form.Checkbox
      label="I agree to the Terms and Conditions"
      error={{
        content: "You must agree to the terms and conditions",
        pointing: "left"
      }}
    />
  </Form>
);

export default FormExampleFieldErrorLabel;

然后在样式表中，为选择器添加每个Form.Input的每个类的名称，并覆盖语义UI提供的样式。

styles.css

.first-name .pointing.below.label {
  top: -13px;
  position: absolute;
  left: -2px;
}

.last-name .pointing.below.label {
  position: absolute;
  top: 63px;
  left: -2px;
}

这也是有效的sandbox。

如何在不更改标签位置的情况下显示错误弹出窗口？

1 个答案:

Example.js

styles.css