Стилизация различных результатов оповещения? - PullRequest
Новая
       9

Стилизация различных результатов оповещения?

0 голосов
/ 09 ноября 2018

Если это код для моего компонента Alert: 

const Alert = ({ message, success }) => (
  <div className={`Alert${success ? ' success' : ''}`}>
    {message}
  </div>
);

И я хочу стилизовать CSS для каждого результата - красный для ошибки, зеленый для успешного результата - если это правильный код для использования ... 

.Alert {
  border: 1px solid red;
  background-color: #ffcccc;
  color: red;
  padding: 10px;
}

.Alert.success {
  border: 1px solid green;
  background-color: #ccffcc;
  color: green;
  padding: 10px;
}

... тогда что я тут не так делаю? 

  handleAddProperty = (event) => {
    this.setState({
      alertMessage: '',
      isSuccess: false,
      isError: false,
    });
    Axios.post('http://localhost:3000/api/v1/PropertyListing', {
      title: this.state.fields.title,
      type: this.state.fields.type,
      bedrooms: this.state.fields.bedrooms,
      bathrooms: this.state.fields.bathrooms,
      price: this.state.fields.price,
      city: this.state.fields.city,
      email: this.state.fields.email,
    })
      .then(() => this.setState({
        isSuccess: true,
        alertMessage: 'Property added successfully.',
      }))
      .catch(() => this.setState({
        isError: true,
        alertMessage: 'Server error. Please try again later.',
      }));
...