React + Material-UI - Предупреждение: не указано имя класса Prop - PullRequest
Новая
       42

React + Material-UI - Предупреждение: не указано имя класса Prop

0 голосов
/ 04 июня 2018

У меня возникают трудности с различиями между рендерингом стилей на стороне клиента и на стороне сервера в компонентах Material-UI из-за того, что classNames назначаются по-разному.

ClassNames назначаются правильно при первой загрузке страницы,но после обновления страницы classNames больше не совпадают, поэтому компонент теряет свой стиль.Это сообщение об ошибке, которое я получаю на консоли:

Предупреждение: пропеллер className не соответствует.Сервер: "MuiFormControl-root-3 MuiFormControl-marginNormal-4 SearchBar-textField-31 " Клиент: "MuiFormControl-root-3 MuiFormControl-marginNormal-4 SearchBar-textField-2 "

Я следовал примеру TextField с пользовательским интерфейсом материала пример документов и сопровождающий их пример песочницы кода , но я не могу понять, чтовызывает различия между именем сервера и клиентом classNames.

У меня возникла похожая проблема при добавлении микросхем Material-UI со значком удаления «x».Значок «х» отображается с чудовищной шириной 1024 пикселя после обновления.Та же самая проблема заключается в том, что значок не получает правильный класс для стиля.

Есть несколько вопросов о переполнении стека, касающихся того, почему клиент и сервер могут по-разному отображать classNames (например, необходимо обновить до @ Material-UI/ core версии ^ 1.0.0, используя пользовательский server.js и используя Math.random в setState), но ни один из них не применим в моем случае.

Я не знаю достаточно, чтобы сказать, является ли это обсуждение Github может помочь, но, вероятно, нет, поскольку они использовали бета-версию Material-UI.

Минимальные шаги для воспроизведения:

Создание папки проекта и запуск сервера Node:

mkdir app
cd app
npm init -y
npm install react react-dom next @material-ui/core
npm run dev

edit package.json:

Добавить в 'scripts': "dev": "next",

app / pages / index.jsx: 

import Head from "next/head"
import CssBaseline from "@material-ui/core/CssBaseline"
import SearchBar from "../components/SearchBar"

const Index = () => (
  <React.Fragment>
    <Head>
      <link
        rel="stylesheet"
        href="https://fonts.googleapis.com/css?family=Roboto:300,400,500"
      />
      <meta name="viewport" content="width=device-width, initial-scale=1" />
      <meta charSet="utf-8" />
    </Head>
    <CssBaseline />
    <SearchBar />
  </React.Fragment>
)

export default Index

app / components / SearchBar.jsx: 

import PropTypes from "prop-types"
import { withStyles } from "@material-ui/core/styles"
import TextField from "@material-ui/core/TextField"

const styles = (theme) => ({
  container: {
    display: "flex",
    flexWrap: "wrap",
  },
  textField: {
    margin: theme.spacing.unit / 2,
    width: 200,
    border: "2px solid red",
  },
})

class SearchBar extends React.Component {
  constructor(props) {
    super(props)
    this.state = { value: "" }
    this.handleChange = this.handleChange.bind(this)
    this.handleSubmit = this.handleSubmit.bind(this)
  }

  handleChange(event) {
    this.setState({ value: event.target.value })
  }

  handleSubmit(event) {
    event.preventDefault()
  }

  render() {
    const { classes } = this.props
    return (
      <form
        className={classes.container}
        noValidate
        autoComplete="off"
        onSubmit={this.handleSubmit}
      >
        <TextField
          id="search"
          label="Search"
          type="search"
          placeholder="Search..."
          className={classes.textField}
          value={this.state.value}
          onChange={this.handleChange}
          margin="normal"
        />
      </form>
    )
  }
}

SearchBar.propTypes = {
  classes: PropTypes.object.isRequired,
}

export default withStyles(styles)(SearchBar)

Посетите страницу в браузере localhost:3000 и увидите это:

красная рамка вокруг компонента TextField

Обновите браузер и увидите следующее:

TextField component 's стили исчезли

Обратите внимание, что красная граница вокруг TextField исчезает.

Соответствующие Libs:

  • "реагируют": 16.4.0
  • "response-dom": 16.4.0
  • "next": 6.0.3
  • "@ material-ui / core": 1.2.0

1 Ответ

0 голосов
/ 21 сентября 2018

Проблема в том, что на стороне сервера генерируются имена классов, но таблицы стилей не включаются автоматически в HTML.Вам необходимо явно извлечь CSS и добавить его в пользовательский интерфейс для отрисованных компонентов на стороне сервера.Весь процесс объясняется здесь: https://material -ui.com / guides / сервер-рендеринг /

...