[Home] forward classes to HomePageSearchBar instead of using className (#9049)

* override styles Signed-off-by: Emma Indal <emma.indahl@gmail.com> * add changeset Signed-off-by: Emma Indal <emma.indahl@gmail.com> * update api report Signed-off-by: Emma Indal <emma.indahl@gmail.com> * forward classes instad of using className Signed-off-by: Emma Indal <emma.indahl@gmail.com> * update changeset breaking change, add instructions Signed-off-by: Emma Indal <emma.indahl@gmail.com>
2022-01-21 12:24:23 +01:00
parent 4df8c4bfd8
commit 2f0d3d3278
5 changed files with 41 additions and 27 deletions
@@ -47,14 +47,12 @@ export default {
 };

 const useStyles = makeStyles(theme => ({
-  search: {
+  searchBar: {
+    display: 'flex',
+    maxWidth: '60vw',
    backgroundColor: theme.palette.background.paper,
    boxShadow: theme.shadows[1],
-    maxWidth: '60vw',
-    display: 'flex',
-    justifyContent: 'space-between',
    padding: '8px 0',
-    borderColor: 'transparent',
    borderRadius: '50px',
    margin: 'auto',
  },
@@ -74,7 +72,7 @@ const useLogoStyles = makeStyles(theme => ({
 }));

 export const DefaultTemplate = () => {
-  const { search } = useStyles();
+  const classes = useStyles();
  const { svg, path, container } = useLogoStyles();

  return (
@@ -88,7 +86,7 @@ export const DefaultTemplate = () => {
            />
            <Grid container item xs={12} alignItems="center" direction="row">
              <HomePageSearchBar
-                className={search}
+                classes={{root: classes.searchBar}}
                placeholder="Search"
              />
            </Grid>