remove last styled components from docs code

Author: KevinVandy

apps/material-react-table-docs/components/mdx/SampleCodeSnippet.tsx

@@ -3,7 +3,6 @@ import {
   useTheme,
   Tooltip,
   IconButton,
-  styled,
   alpha,
   Paper,
   type SxProps,
@@ -13,12 +12,6 @@ import { Highlight, themes } from 'prism-react-renderer';
 import ContentCopyIcon from '@mui/icons-material/ContentCopy';
 import LibraryAddCheckIcon from '@mui/icons-material/LibraryAddCheck';
 
-const CopyButton = styled(IconButton)({
-  position: 'absolute',
-  top: '0.25rem',
-  right: '0.25rem',
-});
-
 interface Props {
   children: string;
   className?: string;
@@ -92,9 +85,16 @@ export const SampleCodeSnippet = ({ paperSxProps, ...props }: Props) => {
           >
             {props.enableCopyButton !== false && (
               <Tooltip arrow title={isCopied ? 'Copied!' : 'Copy Code'}>
-                <CopyButton onClick={handleCopy}>
+                <IconButton
+                  sx={{
+                    position: 'absolute',
+                    top: '0.25rem',
+                    right: '0.25rem',
+                  }}
+                  onClick={handleCopy}
+                >
                   {isCopied ? <LibraryAddCheckIcon /> : <ContentCopyIcon />}
-                </CopyButton>
+                </IconButton>
               </Tooltip>
             )}
             <pre

apps/material-react-table-docs/components/mdx/SourceCodeSnippet.tsx

@@ -18,7 +18,6 @@ import {
   ToggleButtonGroup,
   Tooltip,
   rgbToHex,
-  styled,
   useMediaQuery,
   useTheme,
 } from '@mui/material';
@@ -35,18 +34,6 @@ import { usePlausible } from 'next-plausible';
 import { useThemeContext } from '../../styles/ThemeContext';
 import { EthicalAd } from './EthicalAd';
 
-const CopyButton = styled(IconButton)({
-  position: 'absolute',
-  top: '0.5rem',
-  right: '0.5rem',
-});
-
-const ToggleFullCodeButton = styled(IconButton)({
-  position: 'absolute',
-  top: '0.5rem',
-  right: '3.5rem',
-});
-
 export interface Props {
   Component?: any;
   apiCode?: string;
@@ -419,9 +406,16 @@ export const SourceCodeSnippet = ({
                   }}
                 >
                   <Tooltip arrow title={isCopied ? 'Copied!' : 'Copy Code'}>
-                    <CopyButton onClick={handleCopy}>
+                    <IconButton
+                      sx={{
+                        position: 'absolute',
+                        top: '0.5rem',
+                        right: '0.5rem',
+                      }}
+                      onClick={handleCopy}
+                    >
                       {isCopied ? <LibraryAddCheckIcon /> : <ContentCopyIcon />}
-                    </CopyButton>
+                    </IconButton>
                   </Tooltip>
                   <Tooltip
                     arrow
@@ -431,11 +425,16 @@ export const SourceCodeSnippet = ({
                         : 'Show columns and data definitions'
                     }
                   >
-                    <ToggleFullCodeButton
+                    <IconButton
+                      sx={{
+                        position: 'absolute',
+                        top: '0.5rem',
+                        right: '3.5rem',
+                      }}
                       onClick={() => setIsFullCode(!isFullCode)}
                     >
                       {isFullCode ? <UnfoldLessIcon /> : <UnfoldMoreIcon />}
-                    </ToggleFullCodeButton>
+                    </IconButton>
                   </Tooltip>
                   <pre
                     className={className}

apps/material-react-table-docs/components/navigation/TopBar.tsx

@@ -3,11 +3,10 @@ import Link from 'next/link';
 import { useRouter } from 'next/router';
 import { usePlausible } from 'next-plausible';
 import {
-  AppBar as MuiAppBar,
+  AppBar,
   Box,
-  IconButton as MuiIconButton,
-  styled,
-  Toolbar as MuiToolbar,
+  IconButton,
+  Toolbar,
   Tooltip,
   Typography,
   useMediaQuery,
@@ -27,21 +26,6 @@ import { useThemeContext } from '../../styles/ThemeContext';
 import docsearch from '@docsearch/js';
 import '@docsearch/css';
 
-const AppBar = styled(MuiAppBar)({
-  zIndex: 5,
-});
-
-const Toolbar = styled(MuiToolbar)({
-  display: 'flex',
-  justifyContent: 'space-between',
-});
-
-const IconButton = styled(MuiIconButton)({
-  color: '#fff',
-  height: '3rem',
-  width: '3rem',
-});
-
 interface Props {
   navOpen: boolean;
   setNavOpen: (navOpen: boolean) => void;
@@ -113,11 +97,24 @@ export const TopBar = ({ navOpen, setNavOpen }: Props) => {
           }
         `}
       </style>
-      <AppBar sx={{ opacity: 0.95 }} position="fixed">
-        <Toolbar sx={{ p: '2px 4px' }} disableGutters variant="dense">
+      <AppBar sx={{ opacity: 0.95, zIndex: 5 }} position="fixed">
+        <Toolbar
+          sx={{
+            display: 'flex',
+            justifyContent: 'space-between',
+            p: '2px 4px',
+          }}
+          disableGutters
+          variant="dense"
+        >
           <Box sx={{ display: 'flex' }}>
             {!isDesktop && (
               <IconButton
+                sx={{
+                  color: '#fff',
+                  height: '3rem',
+                  width: '3rem',
+                }}
                 aria-label="Open nav menu"
                 onClick={() => setNavOpen(!navOpen)}
               >
@@ -193,7 +190,15 @@ export const TopBar = ({ navOpen, setNavOpen }: Props) => {
                 rel="noopener"
                 target="_blank"
               >
-                <IconButton aria-label="Github" size="small">
+                <IconButton
+                  sx={{
+                    color: '#fff',
+                    height: '3rem',
+                    width: '3rem',
+                  }}
+                  aria-label="Github"
+                  size="small"
+                >
                   <GitHubIcon />
                 </IconButton>
               </a>
@@ -204,7 +209,15 @@ export const TopBar = ({ navOpen, setNavOpen }: Props) => {
                 rel="noopener"
                 target="_blank"
               >
-                <IconButton aria-label="Discord" size="small">
+                <IconButton
+                  sx={{
+                    color: '#fff',
+                    height: '3rem',
+                    width: '3rem',
+                  }}
+                  aria-label="Discord"
+                  size="small"
+                >
                   <img
                     alt="Discord"
                     height={20}
@@ -219,6 +232,11 @@ export const TopBar = ({ navOpen, setNavOpen }: Props) => {
             </Tooltip>
             <Tooltip arrow title="Toggle Light/Dark Mode">
               <IconButton
+                sx={{
+                  color: '#fff',
+                  height: '3rem',
+                  width: '3rem',
+                }}
                 aria-label="Toggle Light/Dark Mode"
                 onClick={() => {
                   setIsLightTheme(!isLightTheme);

packages/material-react-table/stories/features/RowActions.stories.tsx

@@ -5,17 +5,11 @@ import Edit from '@mui/icons-material/Edit';
 import ShareIcon from '@mui/icons-material/Share';
 import Button from '@mui/material/Button';
 import IconButton from '@mui/material/IconButton';
-import MuiMenuItem from '@mui/material/MenuItem';
-import { styled } from '@mui/material/styles';
+import MenuItem from '@mui/material/MenuItem';
 import { type MRT_ColumnDef, MaterialReactTable } from '../../src';
 import { faker } from '@faker-js/faker';
 import { type Meta } from '@storybook/react';
 
-const MenuItem = styled(MuiMenuItem)({
-  display: 'flex',
-  gap: '0.75rem',
-});
-
 const meta: Meta = {
   title: 'Features/Row Actions Examples',
 };