How can I change the styles of the react-toastify popup message with Styled-Components?-CodePudding

I would like to see your decision... because I have something like it

.Toastify__toast--success {
 border: 1px solid black
}

in my globalStyles

CodePudding user response：

Toastify__toast--warning {
  background: #FFE8BC !important;
}
.Toastify__toast--error {
  background: #FCA7A9 !important;
}
.toastBody {
  color: #10171D; 
}
.toastProgress {
  background: #333F48 !important;
}

CodePudding user response：

I found the best way

const StyledContainer = styled(ToastContainer)`
 &&&.Toastify__toast-container {
}
.Toastify__toast {
}
.Toastify__toast-body {
}
.Toastify__progress-bar {
}
`;