noobie in frontend here trying to learn how to mess with Material UI.

I am trying to create a Select Component, but I’m trying to change it’s bottom’s border to something different than the default. Right now, I’m doing this:

<Select 
    value={this.state.valueFromState !== undefined ? this.state.valueFromState: -1}
    onChange={(event) => {
        // Irrelevant logic here
   }}
   variant={"standard"}
   disabled={!this.state.editMode}
   sx={{
       "& .MuiInputBase-root-MuiInput-root-MuiSelect-root": {
           "&:before": {
               borderBottom: "3px solid #1f2833"
           },

           "&.Mui-disabled:before": {
               border: 0
           }
       }
   }}>
   // Items go here
</Select>

Whatever I do, the border doesn’t change at all, so I’m guessing it must be something I’m doing wrong with the pseudoclasses (in this case, ::before)? I’ve tried ::before and :before (as sometimes appears in my browser’s dev tools) to no avail.

I got the classes’ names from my browsers’ devtools as shown below:

I really don’t know what else can I really do, so any help is really appreciated. Thanks!