Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Bug Report] formily构建的组件样式与预期不符 #4251

Closed
1 task done
Jjqcoder opened this issue Dec 18, 2024 · 4 comments
Closed
1 task done

[Bug Report] formily构建的组件样式与预期不符 #4251

Jjqcoder opened this issue Dec 18, 2024 · 4 comments

Comments

@Jjqcoder
Copy link

Jjqcoder commented Dec 18, 2024

  • I have searched the issues of this repository and believe that this is not a duplicate.

Reproduction link

Edit on CodeSandbox

Steps to reproduce

我使用了快速入门中的代码:

import React from 'react'
import { createForm } from '@formily/core'
import { FormProvider, FormConsumer, Field } from '@formily/react'
import {
  FormItem,
  FormLayout,
  Input,
  FormButtonGroup,
  Submit,
} from '@formily/antd'

const form = createForm()

export default () => {
  return (
    <FormProvider form={form}>
      <FormLayout layout="vertical">
        <Field
          name="input"
          title="Input box"
          required
          initialValue="Hello world"
          decorator={[FormItem]}
          component={[Input]}
        />
      </FormLayout>
      <FormConsumer>
        {() => (
          <div
            style={{
              marginBottom: 20,
              padding: 5,
              border: '1px dashed #666',
            }}
          >
            Real-time response:{form.values.input}
          </div>
        )}
      </FormConsumer>
      <FormButtonGroup>
        <Submit onSubmit={console.log}>submit</Submit>
      </FormButtonGroup>
    </FormProvider>
  )
}

What is expected?

预期样式应该与官方文档一致

What is actually happening?

  • 必填字段的星号为黑色
  • 冒号独占一行

Package

@formily/[email protected]


@Jjqcoder
Copy link
Author

预期效果:
image

实际效果:
image

我的项目的相关依赖如下:

  "dependencies": {
    "@formily/antd": "^2.3.2",
    "@formily/core": "^2.3.2",
    "@formily/react": "^2.3.2",
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "antd": "^5.22.5",
    "moment": "^2.30.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-router-dom": "^7.0.2",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
  },

@Jjqcoder
Copy link
Author

换成react+ts项目之后,该问题依然存在

依赖为:

  "dependencies": {
    "@formily/antd": "^2.3.2",
    "@formily/core": "^2.3.2",
    "@formily/react": "^2.3.2",
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "@types/jest": "^27.5.2",
    "@types/node": "^16.18.98",
    "@types/react": "^18.3.3",
    "@types/react-dom": "^18.3.0",
    "antd": "^5.22.5",
    "moment": "^2.30.1",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "react-scripts": "5.0.1",
    "typescript": "^4.9.5",
    "web-vitals": "^2.1.4"
  }

@Jjqcoder
Copy link
Author

我知道了,之前我混淆了文档
应该使用此文档才对(antd-v5)
image

@Jjqcoder
Copy link
Author

问题已解决

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant