У меня есть приложение реагирования, созданное npx create-react-app
. Используется машинопись и antd. Я следую инструкциям по использованию Antd и Typescript здесь: https://ant.design/docs/react/use-in-typescript, но происходит некоторое странное поведение.
Стили компонента Antd не загружались при его рендеринге из дочернего компонента, за исключением этого все выглядит хорошо.
Пример: LoginForm.tsx
:
<Card className={styles.card}>
<Typography.Title level={3}>Login to Shiritori </Typography.Title>
{userSelector.error && (
<Alert
className={styles.message}
message={userSelector.error}
type="error"
showIcon
/>
)}
<LoginForm /> <-- child component
</Card
Все компоненты antd, используемые в этом компоненте, правильно загружают свои стили, а компоненты, отображаемые из компонента <LoginForm />
, - нет.
LoginForm.tsx
:
<Form onSubmit={handleSubmit} className="signin_form" autoComplete="off">
<Item>
{getFieldDecorator("username", {
rules: [{ required: true, message: "Please input your username!." }]
})(<Input placeholder="Username" size="large" />)}
</Item>
<Item>
{getFieldDecorator("password", {
rules: [{ required: true, message: "Please input your password!." }]
})(<Input.Password placeholder="Password" size="large" />)}
</Item>
<Button
className="btn"
htmlType="submit"
type="primary"
block
loading={loading}
>
{loading ? "Logging In" : "Log In"}
</Button>
</Form>
Имена классов, используемые компонентами antd, присутствуют, но не в стиле css.
Зависимости, используемые приложением:
"dependencies": {
"@reduxjs/toolkit": "1.2.5",
"@testing-library/dom": "^6.12.2",
"@testing-library/jest-dom": "^5.1.1",
"@testing-library/react": "^9.4.0",
"@testing-library/user-event": "^10.0.0",
"@types/jest": "^25.1.3",
"@types/node": "^13.7.4",
"@types/react": "^16.9.21",
"@types/react-dom": "^16.9.5",
"@types/react-redux": "^7.1.7",
"@types/redux-mock-store": "^1.0.2",
"@typescript-eslint/eslint-plugin": "^2.20.0",
"@typescript-eslint/parser": "^2.20.0",
"antd": "^3.26.12",
"axios": "^0.19.2",
"customize-cra": "^0.9.1",
"eslint": "^6.8.0",
"eslint-config-prettier": "^6.10.0",
"eslint-plugin-prettier": "^3.1.2",
"eslint-plugin-react": "^7.18.3",
"history": "^4.10.1",
"node-sass": "^4.13.1",
"prettier": "^1.19.1",
"react": "^16.12.0",
"react-app-rewired": "^2.1.5",
"react-dom": "^16.12.0",
"react-redux": "^7.2.0",
"react-router-dom": "^5.1.2",
"react-scripts": "^3.4.0",
"redux": "^4.0.5",
"redux-mock-store": "^1.5.4",
"styled-components": "^5.0.1",
"typescript": "~3.8.2"
},