fix: update css (#1506)

adobe · May 9, 2023 · c1f305a · c1f305a
1 parent fd7c832
commit c1f305a
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 9 deletions.
diff --git a/packages/gatsby-theme-aio/src/components/List/index.js b/packages/gatsby-theme-aio/src/components/List/index.js
@@ -16,14 +16,18 @@ import PropTypes from 'prop-types';
 import '@spectrum-css/typography';
 import {css} from "@emotion/react";
 
-const List = ({ children, elementType = 'ul', className, ...props }) => {
+const List = ({ children, elementType = 'ul', css: cssOverrides, className, ...props }) => {
   const Element = elementType;
-
+  const listOverrides = `
+  margin-top: var(--spectrum-global-dimension-size-150);
+`;
   return (
     <Element {...props} className={classNames(className, 'spectrum-Body spectrum-Body--sizeM')}
-     css={css`
-      margin-top: var(--spectrum-global-dimension-size-150);
-      `}>
+      css={css`
+      ${listOverrides}
+      ${cssOverrides}
+      
+    `}>
       {children}
     </Element>
   );

diff --git a/packages/gatsby-theme-aio/src/components/Table/index.js b/packages/gatsby-theme-aio/src/components/Table/index.js
@@ -15,12 +15,16 @@ import { css } from '@emotion/react';
 import '@spectrum-css/table';
 import {layoutColumns, MOBILE_SCREEN_WIDTH, TABLET_SCREEN_WIDTH} from "../../utils";
 
-const Table = ({ children, ...props }) => (
+const tableOverrides = `
+  margin-top: var(--spectrum-global-dimension-size-150);
+`;
+
+const Table = ({ children, css: cssOverrides, ...props }) => (
   <div css={css`overflow-x: auto; overflow-y: hidden;`}>
     <table className="spectrum-Table spectrum-Table--sizeM" {...props}
-       css={css`
-        margin-bottom: var(--spectrum-global-dimension-size-150);
-       `}>
+           css={css`
+            ${tableOverrides}
+            ${cssOverrides}`}>
       {children}
     </table>
   </div>