I've created a app bar using Material UI. I need to add a couple finishing touches :

1. Rounded Input Base - so border radius
2. Changing the colour of the app bar (so overriding Material UI's colours) The issue I'm having is because I used the example on the material UI website to create it, it's difficult to input new code into it to override what has been imported and also what is there.

This is the code:

const Search = styled('div')(({ theme }) => ({
position: 'relative',
borderRadius: theme.shape.borderRadius,
backgroundColor: alpha(theme.palette.common.black, 0.15),
'&:hover': {
  backgroundColor: alpha(theme.palette.common.black, 0.25),
},
marginLeft: 0,
width: '100%',
[theme.breakpoints.up('sm')]: {
  marginLeft: theme.spacing(1),
  width: 'auto',
},

}));

const StyledInputBase = styled(InputBase)(({ theme }) => ({ color: 'inherit', '& .MuiInputBase-input': { padding: theme.spacing(1, 1, 1, 0), // vertical padding font size from searchIcon paddingLeft: calc(1em ${theme.spacing(4)}), transition: theme.transitions.create('width'), width: '100%', [theme.breakpoints.up('sm')]: { width: '12ch', '&:focus': { width: '20ch', }, }, }, }));

const SearchIconWrapper = styled('div')(({ theme }) => ({ padding: theme.spacing(0, 2), height: '100%', position: 'absolute', pointerEvents: 'none', display: 'flex', alignItems: 'center', justifyContent: 'center', }));

function appbar () {

return (
    <div className= 'navbar'>
    <AppBar position='static'
    className= "appbar">
        <Toolbar>
            <Typography
            Hello World
            </Typography>
<Search> 
<SearchIconWrapper>
    <SearchIcon className = 'searchicon' sx={{ transform: "scale(1.3)" }} />
    </SearchIconWrapper>
    <StyledInputBase
          placeholder="Search for more here"
          inputProps={{ 'aria-label': 'search' }}
        />
</Search> 
        </Toolbar>
    </AppBar>
    </div>
    

CodePudding user response：

Can you just add !important?

borderRadius: theme.shape.borderRadius !important,

CodePudding user response：

Material UI supports passing a color prop to the app bar. First define a theme file and pass it to the Theme Provider of your app like this. You can refer to the documentation here

import * as React from 'react';
import ReactDOM from 'react-dom';
import { red } from '@mui/material/colors';
import { ThemeProvider, createTheme } from '@mui/material/styles';

const theme = createTheme({
  palette: {
    primary: {
      main: red[500],
    },
    secondary: {
      main: red[500],
    },
  },
});

function App() {
  return <ThemeProvider theme={theme}>...</ThemeProvider>;
}

ReactDOM.render(<App />, document.querySelector('#app'));

With your theme created you can pass the value to the app bar like this

  <AppBar color="primary" position="static" className="appbar">
  </AppBar>

Not sure how you want to pass the border radius. but you can do something like this

const StyledInputBase = styled(InputBase)(({ theme }) => ({
  color: "inherit",
  "& .MuiInputBase-input": {
    padding: theme.spacing(1, 1, 1, 0),
    // vertical padding   font size from searchIcon
    borderRadius: `4px 0 0 4px`,
    paddingLeft: `calc(1em   ${theme.spacing(4)})`,
    transition: theme.transitions.create("width"),
    width: "100%",
    [theme.breakpoints.up("sm")]: {
      width: "12ch",
      "&:focus": {
        width: "20ch",
      },
    },
  },
}));

There are definitely other ways to pass the styles like this

<StyledInputBase
  placeholder="Search for more here"
  inputProps={{
    "aria-label": "search",
    classes: {
      root: classes.input,
    },
  }}
/>;

Let me know if you have any difficulty, I will be happy to help.