Styled Container - Copy this React, Mui Component to your project

<Select sx={{ width: "100%" }} displayEmpty sx={{ width: "100%", "& .MuiOutlinedInput-root": { "& fieldset": { borderColor: "#ccc", }, "&:hover fieldset": { borderColor: "#5600d3", }, "&.Mui-focused fieldset": { borderColor: "#5600d3", borderWidth: "2px", }, }, // This ensures the border color also changes when dropdown is open "& .MuiOutlinedInput-notchedOutline": { borderColor: "#ccc", }, "&.Mui-focused .MuiOutlinedInput-notchedOutline": { borderColor: "#5600d3", }, "&.MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline": { borderColor: "#5600d3", }, "& .MuiInputLabel-root.Mui-focused": { color: "#5600d3", // Label color when focused }, }} > <MenuItem value="views">2020</MenuItem> <MenuItem value="likes">2021</MenuItem> </Select>