Disabled is invalid when the button has a nested relationship

Problem: The button to jump to the page, even if disabled={true} is set, it can still jump every time

          <Link
            to={`${url}/create`}
            className="ml20"
          >
            <Button disabled={true} className="createBtn" icon={<PlusOutlined />}>
              Create Database
            </Button>
          </Link>

Solution: set a disabled style for it

          <Link
            to={`${url}/create`}
            className={classNames('ml20', { disabled: noReadWritePermission })}
          >
            <Button className="createBtn" icon={<PlusOutlined />}>
              Create Database
            </Button>
          </Link>
.disabled,
[disabled],
button[disabled],
input[disabled] {
    
    
  cursor: default;
  outline: 0 none;
  opacity: 0.65;
  filter: grayscale(100%);
  filter: alpha(opacity=40);
  /* 元素永远不会成为鼠标事件的target */
  pointer-events: none;  
}

Guess you like

Origin blog.csdn.net/qq_41536505/article/details/119120886