CODEWITHSUNDEEP
reactjssweetalert2
Djaenike
Djaenike

Reputation: 1865

Reactjs - how to change styling of inputValidator of sweetalert2 popup

I'm currently using sweetalert2 to have the user select a file. If the user does not select a file I am using inputValidator to post an error message on the popup. The default error message puts a red border around the file input box. Is it possible to remove the red border or to customize it (change it to green/blue)? Here is the code I am using.

const MySwal = withReactContent(Swal)

    MySwal.fire({
        confirmButtonText: 'Submit File',
        showCancelButton: true,
        title: "<b>Submit New File</b>",
        input: 'file',
        focusConfirm: false,
        allowOutsideClick: false,
        inputValidator: (value) => {
          if(!value){
            return "Please select a file"
          }
        }

Thanks!

enter image description here

Upvotes: 1

Views: 580

Answers (1)

Hasan Sh
Hasan Sh

Reputation: 1063

I never used Swal before, but what you can do is to give the input field a customClass and give it border as you wish.

source

Hope that helped!

Upvotes: 2

Related Questions