ReactJS:根据axios发布结果,以红/绿背景显示状态

我有一个表格,我需要在表格下面显示状态。当我提交表格时,根据axios后的成功和失败,我会显示状态。截至今天,我可以显示以下错误状态

当提交成功时,我想要什么,我想显示如下状态。

我有以下代码。

//State
const [stats, setStatus] = useState(null);

//axios post
        try {
            const res = await axios.post('/exec/addcontroller', 
                {user, name, ipaddr, port, sshuser, sshpass, sshport, license},
                {headers: {
                    'Content-Type': 'application/json',
                    'Authorization': token,
                }}
            ).then( function (res) {
                if(res.status === 200) {
                    //success
                } else {
                    setStatus("Error");
                }
            });
        }catch(err) {
            setStatus(err.response.data.message);
        }

//form code goes here

//status div
{status && <div id="error">{status}</div>}

css如下所示

#error {
  color: #FF0040;
  border: 1px solid #F7819F;
  padding: 5px;
  background-color: #F8E0E6;
}

所以,在成功的案例中,我需要的是用深绿色的字母和浅绿色的背景来显示状态。如何做出反应?