import { FormControl, Select, MenuItem, makeStyles } from "@material-ui/core"; 
import { useState } from "react"; 
 
const dropdownStyles = makeStyles({ 
  underline: { 
    borderBottom: "0px solid red !important", 
    "&:hover": { 
      borderBottom: "0px solid rgba(0,0,0,0)" 
    } 
  } 
}); 
 
const Dropdown = () => { 
  const ddnSt = dropdownStyles(); 
  const [item, setItem] = useState(1); 
  const selectStyle = { 
    control: (base) => ({ 
      ...base, 
      boxShadow: "none" 
    }) 
  }; 
  const handleChange = (event) => { 
    setItem(event.target.value); 
  }; 
  return ( 
    <FormControl 
      style={{ 
        width: "140px", 
        boxShadow: "none" 
      }} 
    > 
      <Select 
        id="locationSelect" 
        className={ddnSt.underline} 
        value={item} 
        onChange={handleChange} 
        disableUnderline 
      > 
        <MenuItem value={1}>Item 1</MenuItem> 
        <MenuItem value={2}>Item 2</MenuItem> 
        <MenuItem value={3}>Item 3</MenuItem> 
      </Select> 
    </FormControl> 
  ); 
}; 
 
export default Dropdown;

git clone git@github.com:reduxjs/redux-toolkit.git

$ yt-dlp  -f "bestaudio/best[ext=m4a]" 4kmFt3apCRkuB13n4YjT0M2TJhXp

dispatch(apiSlice.endpoints.saveData.initiate(modifiedData));

import { createEntityAdapter, createSlice } from '@reduxjs/toolkit';

// Define a "User" entity
type User = {
id: string;
name: string;
};

// Create an entity adapter for "User"
const usersAdapter = createEntityAdapter<User>();

// Create a slice that uses the entity adapter
const usersSlice = createSlice({
name: 'users',
initialState: usersAdapter.getInitialState(),
reducers: {
// Reducer logic using adapter methods
userAdded: usersAdapter.addOne,
userUpdated: usersAdapter.updateOne,
userRemoved: usersAdapter.removeOne,
},
});

// Export the generated actions and selectors
export const { userAdded, userUpdated, userRemoved } = usersSlice.actions;
export const {
selectById: selectUserById,
selectIds: selectUserIds,
selectEntities: selectUserEntities,
selectAll: selectAllUsers,
} = usersAdapter.getSelectors(state => state.users);

dispatch(baseApi.util.resetApiState());

import { styled } from '@mui/system';

const MyComponent = styled('div')(({ theme }) => ({
  width: '100%',
  [theme.breakpoints.up('md')]: {
    width: '50%',
  },
}));

import { useTheme } from '@mui/material/styles';

function MyComponent() {
  const theme = useTheme();

  const styles = {
    container: {
      width: '100%',
      [theme.breakpoints.up('md')]: {
        width: '50%',
      },
    },
  };

  return <div style={styles.container}>...</div>;
}

import { useMediaQuery } from '@mui/material';

function MyComponent() {
  const matches = useMediaQuery('(min-width:600px)');

  return <div>{matches ? 'Large screen' : 'Small screen'}</div>;
}