设定不同的警报结果？

Question

如果这是我的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.',
      }));