Стили и дочерние компоненты не загружаются с помощью приложения Create React - PullRequest
0 голосов
/ 28 февраля 2020

У меня есть приложение реагирования, созданное 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"
  },
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...