Стили перестали отображаться в React

Question

Возникла проблема следующего характера: Есть файл Car.js, компонент которого раньше содержал корневой элемент со стилями, но я переписал его таким образом, чтобы корневой элемент не создавался (через <React.Fragment>):

import React from 'react';
import classes from './Car.css';
import withClass from '../hoc/withClass';

class Car extends React.Component {

  render() {
    const inputClasses = [classes.input]

    if (this.props.name !== '') {
      inputClasses.push(classes.green)
    } else {
      inputClasses.push(classes.red)
    }

    if (this.props.name.length > 4) {
      inputClasses.push(classes.bold)
    }

    return (
      <React.Fragment>
        <h3>Сar name: {this.props.name}</h3>
        <p>Year: <strong>{this.props.year}</strong></p>
        <input
          type="text"
          onChange={this.props.onChangeName}
          value={this.props.name}
          className={inputClasses.join(' ')}
        />
        <button onClick={this.props.onDelete}>Delete</button>
      </React.Fragment>
    )
  }
}

export default withClass(Car, classes.Car);

Чтобы применить стили, я создал файл withClass.js, функция из этого файла вызывается при экспорте в предыдущем файле. Функция принимает сам компонент и применяемый к нему класс:

import React from 'react';

const withClass = (Component, className) => {
  return props => {
    return (
      <div className={className}>
        <Component {...props} />
      </div>
    )
  }
}

export default withClass;

Собственно проблема: стили не работают (должна быть рамочка и тень), почему - не могу понять. Ошибка в самих стилях исключена, файл прилагаю:

.Car {
    margin-bottom: 10px;
    display: block;
    padding: 10px;
    border-radius: 5;
    transition: border, box-shadow .3s;
    border: 1px solid #ccc;
    box-shadow: 0 4px 5px 0 rgba(0, 0, 0, .14);
}
.Car:hover {
    border: 1px solid #aaa;
    box-shadow: 0 4px 15px 0 rgba(0, 0, 0, .25);
    cursor: pointer;
}

Буду благодарен за помощь

Answer 1

Что ж, на свежую голову я нашел решение. Решил оставить ответ, если кому-то он вдруг понадобится. Ошибка, собственно, в файле Car.js: изменил массив inputClasses и стал пушить в него новые стили немного иначе. При экспорте класс оборачиваем в кавычки:

import React from 'react';
import classes from './Car.css'
import withClass from '../hoc/withClass';

class Car extends React.Component {

  render() {
    const inputClasses = ['input'] //изменил массив

    if (this.props.name !== '') {
      inputClasses.push('green')  //пушим вот так 
    } else {
      inputClasses.push('red')
    }

    if (this.props.name.length > 4) {
      inputClasses.push('bold')
    }

    return (
      <React.Fragment>
        <h3>Сar name: {this.props.name}</h3>
        <p>Year: <strong>{this.props.year}</strong></p>
        <input
          type="text"
          onChange={this.props.onChangeName}
          value={this.props.name}
          className={inputClasses.join(' ')}
        />
        <button onClick={this.props.onDelete}>Delete</button>
      </React.Fragment>
    )
  }
}

export default withClass(Car, 'Car'); // класс в кавычках

БЛОГ НА HUSL

Стили перестали отображаться в React

Ответы (1 шт):