Merge pull request #17856 from luchillo17/fix/BCKSTG-162-broken-custom-styles-on-searc

Fix SearchBar styles & update StoryBook stories for custom styles
2023-05-24 11:32:10 +02:00
parent 6118c54213 6b281bda66
commit 15c3d7cecd
8 changed files with 126 additions and 152 deletions
@@ -61,6 +61,9 @@ const useStyles = makeStyles(theme => ({
    borderRadius: '50px',
    margin: 'auto',
  },
+  searchBarOutline: {
+    borderStyle: 'none',
+  },
 }));

 export const CustomStyles = () => {
@@ -71,6 +74,7 @@ export const CustomStyles = () => {
      <Grid container item xs={12} alignItems="center" direction="row">
        <HomePageSearchBar
          classes={{ root: classes.searchBar }}
+          InputProps={{ classes: { notchedOutline: classes.searchBarOutline } }}
          placeholder="Search"
        />
      </Grid>
@@ -23,10 +23,12 @@ import {
 import { useNavigateToQuery } from '../util';

 const useStyles = makeStyles({
-  root: {
+  searchBarRoot: {
+    fontSize: '1.5em',
+  },
+  searchBarOutline: {
    border: '1px solid #555',
    borderRadius: '6px',
-    fontSize: '1.5em',
  },
 });

@@ -60,10 +62,17 @@ export const HomePageSearchBar = (props: HomePageSearchBarProps) => {

  return (
    <SearchBarBase
-      classes={{ root: classes.root }}
      value={query}
      onSubmit={handleSubmit}
      onChange={handleChange}
+      InputProps={{
+        ...props.InputProps,
+        classes: {
+          root: classes.searchBarRoot,
+          notchedOutline: classes.searchBarOutline,
+          ...props.InputProps?.classes,
+        },
+      }}
      {...props}
    />
  );