Add custom button states with emotion + add polished pkg

Author: Jareechang

README.md

@@ -21,6 +21,7 @@ repo is built upon [example-nextjs-emotion11](https://github.com/Jareechang/exam
 
 ### Technologies
 
-- emotion @ 11.0
-- material-ui @ 4.11
-- next @ 10.x
+- [emotion](https://emotion.sh/docs/@emotion/css) @ 11.0
+- [material-ui](https://material-ui.com/) @ 4.11
+- [next](https://nextjs.org/docs/getting-started) @ 10.x
+- [polished](https://polished.js.org/docs/) @ 4.x

components/button/Button.css.ts

@@ -0,0 +1,25 @@
+import { css, cx } from '@emotion/css'
+import { lighten } from 'polished';
+
+export const common = css`
+  padding: 1em 2em;
+`
+export const error = cx(
+  common,
+  css`
+    background: #f44336;
+    &:hover {
+      background: ${lighten(0.2, '#f44336')};
+    }
+  `
+)
+
+export const success = cx(
+  common,
+  css`
+    background: lightgreen;
+    &:hover {
+      background: ${lighten(0.2, 'lightgreen')};
+    }
+  `
+)

components/button/Button.tsx

@@ -0,0 +1,19 @@
+import MuiButton from '@material-ui/core/Button'
+import Props from './types'
+import * as styles from './Button.css'
+import * as utils from './utils'
+
+const defaultProps : Props = {
+  type: ''
+}
+
+const Button : React.FC<Props> = (props = defaultProps) => {
+  return (
+    <MuiButton
+      className={utils.mapButtonTypeToStyle(props.type)}
+      {...props}
+    />
+  )
+}
+
+export default Button

components/button/index.ts

@@ -0,0 +1 @@
+export {default as Button} from './Button';

components/button/types.ts

@@ -0,0 +1,3 @@
+export interface Props {
+
+}

components/button/utils.ts

@@ -0,0 +1,12 @@
+import * as styles from './Button.css'
+
+export const mapButtonTypeToStyle = (type) => {
+  switch (type) {
+    case 'error':
+      return styles.error;
+    case 'success':
+      return styles.success;
+    default:
+      return styles.common;
+  }
+}

package.json

@@ -17,6 +17,7 @@
     "date-fns": "^2.11.1",
     "gray-matter": "^4.0.2",
     "next": "^10.0.0",
+    "polished": "^4.0.3",
     "react": "16.13.1",
     "react-dom": "16.13.1",
     "remark": "^12.0.0",

pages/_app.tsx

@@ -14,15 +14,14 @@ export default function App({ Component, pageProps }) {
       jssStyles.parentElement.removeChild(jssStyles);
     }
   }, []);
-
-    return (
-      <StylesProvider injectFirst>
-        <ThemeProvider theme={theme}>
-          <CacheProvider value={cache}>
-            {globalStyles}
-            <Component {...pageProps} />
-          </CacheProvider>
-        </ThemeProvider >
-      </StylesProvider>
-    );
+  return (
+    <StylesProvider injectFirst>
+      <ThemeProvider theme={theme}>
+        <CacheProvider value={cache}>
+          {globalStyles}
+          <Component {...pageProps} />
+        </CacheProvider>
+      </ThemeProvider >
+    </StylesProvider>
+  );
 }

pages/_document.tsx

@@ -9,18 +9,15 @@ const { extractCritical } = createEmotionServer(cache)
 
 export default class MyDocument extends Document {
   static async getInitialProps(ctx) {
-
     const sheets = new ServerStyleSheets()
     const originalRenderPage = ctx.renderPage
-
     ctx.renderPage = () => {
       return (
         originalRenderPage({
           enhanceApp: (App) => (props) => sheets.collect(<App {...props} />),
         })
       )
     }
-
     const initialProps = await Document.getInitialProps(ctx)
     const styles = extractCritical(initialProps.html)
     return {

pages/index.js

@@ -1,26 +1,40 @@
 import Head from 'next/head'
 import Link from 'next/link'
 import { css, cx } from '@emotion/css'
-import Button from '@material-ui/core/Button';
+import Box from '@material-ui/core/Box';
+//import Button from '@material-ui/core/Button';
+import Typography from '@material-ui/core/Typography';
 import Layout, { siteTitle } from '../components/layout'
 import * as utilStyles from '../styles/utils.css'
 import { getSortedPostsData } from '../lib/posts'
 import Date from '../components/date'
+import { Button } from '../components/button';
 
 export default function Home({ allPostsData }) {
   return (
     <Layout home>
-      <Button variant="contained" color="primary">Default</Button>
       <Head>
         <title>{siteTitle}</title>
       </Head>
       <section className={utilStyles.headingMd}>
-        <p>[Your Self Introduction]</p>
-        <p>
+        <Typography variant="body1">[Your Self Introduction]</Typography>
+        <Typography
+          variant="body1">
           (This is a sample website - you’ll be building a site like this in{' '}
           <a href="https://nextjs.org/learn">our Next.js tutorial</a>.)
-        </p>
+        </Typography>
       </section>
+      <Box
+        py={3}
+        display="flex"
+        justifyContent="center">
+        <Button
+          type="error"
+          variant="contained"
+          color="primary">
+          I’m a button
+        </Button>
+      </Box>
       <section className={cx(utilStyles.headingMd, utilStyles.padding1px)}>
         <h2 className={utilStyles.headingLg}>Blog</h2>
         <ul className={utilStyles.list}>

styles/material-ui/theme.ts

@@ -17,6 +17,17 @@ const theme = createMuiTheme({
       default: '#fff',
     },
   },
+  typography: {
+    body1: {
+      fontFamily: `-apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
+    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;`,
+      padding: '1em 0',
+      margin: 0,
+      lineHeight: 1.6,
+      fontSize: '18px'
+    }
+
+  }
 });
 
 export default theme;

styles/utils.css.ts

@@ -1,5 +1,6 @@
 import { css } from '@emotion/css'
 
+
 export const heading2Xl = css`
   font-size: 2.5rem;
   line-height: 1.2;

yarn.lock

@@ -1018,7 +1018,7 @@
   dependencies:
     regenerator-runtime "^0.13.4"
 
-"@babel/runtime@^7.3.1", "@babel/runtime@^7.4.4", "@babel/runtime@^7.5.5", "@babel/runtime@^7.7.2", "@babel/runtime@^7.8.3", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7":
+"@babel/runtime@^7.12.0", "@babel/runtime@^7.3.1", "@babel/runtime@^7.4.4", "@babel/runtime@^7.5.5", "@babel/runtime@^7.7.2", "@babel/runtime@^7.8.3", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7":
   version "7.12.5"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.12.5.tgz#410e7e487441e1b360c29be715d870d9b985882e"
   integrity sha512-plcc+hbExy3McchJCEQG3knOsuh3HH+Prx1P6cLIkET/0dLuQDEnrT+s27Axgc9bqfsmNUNHfscgMUdBpC9xfg==
@@ -4680,6 +4680,13 @@ pnp-webpack-plugin@1.6.4:
   dependencies:
     ts-pnp "^1.1.6"
 
+polished@^4.0.3:
+  version "4.0.3"
+  resolved "https://registry.yarnpkg.com/polished/-/polished-4.0.3.tgz#e2bde249f8884bdabc6997dd3eca225ee32f7a26"
+  integrity sha512-yOALHMrqcYHlHIxFkHvGX8NGsjsbSaYMZ8Z3uEElVpzF5ZgNmTgqMOh4bnSVXGC6sXjBTZCH6+GebTRWhJR4zQ==
+  dependencies:
+    "@babel/runtime" "^7.12.0"
+
 popper.js@1.16.1-lts:
   version "1.16.1-lts"
   resolved "https://registry.yarnpkg.com/popper.js/-/popper.js-1.16.1-lts.tgz#cf6847b807da3799d80ee3d6d2f90df8a3f50b05"