From eaa945a9fc35814f10e41fb885d7afa2ec53655f Mon Sep 17 00:00:00 2001
From: unix <unix.bio@gmail.com>
Date: Sat, 21 Mar 2020 01:05:15 +0800
Subject: [PATCH] docs: fix color of codes

---
 pages/_app.tsx                              |  6 +++++-
 pages/docs/getting-started/installation.mdx | 10 +++++-----
 2 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/pages/_app.tsx b/pages/_app.tsx
index ae036f7..d21d246 100644
--- a/pages/_app.tsx
+++ b/pages/_app.tsx
@@ -56,7 +56,11 @@ const Application: NextPage<AppProps> = ({ Component, pageProps }) => {
           color: ${theme.palette.accents_4};
         }
         
-        span[class*="class-name"] {
+        span.class-name {
+          color: ${theme.palette.warning};
+        }
+        
+        span.maybe-class-name {
           color: ${theme.palette.purple};
         }
         
diff --git a/pages/docs/getting-started/installation.mdx b/pages/docs/getting-started/installation.mdx
index 2508e30..495eb40 100644
--- a/pages/docs/getting-started/installation.mdx
+++ b/pages/docs/getting-started/installation.mdx
@@ -23,13 +23,13 @@ and also need a package manager of NodeJS: <Link href="https://www.npmjs.com/">N
 2. Import `@zeit-ui/react` to your React project:
 
 ```jsx
-import { CSSBaseline, ZEITUIProvider, useTheme } from '@zeit-ui/react'
+import { ZEITUIProvider, CSSBaseline } from '@zeit-ui/react'
 
 const Application = () => {
   return (
     <ZEITUIProvider>   // ---> Base provider
       <CSSBaseline />  // ---> normalize styles
-      <Component />    // ---> Your App Component
+      <AppComponent />    // ---> Your App Component
     </ZEITUIProvider>
   )
 }
@@ -40,7 +40,7 @@ const Application = () => {
 ```jsx
 import { Button } from '@zeit-ui/react'
 
-const MyComponent = () =>  <Button>click me</Button>
+const MyComponent = () =>  <Button>Click Me</Button>
 ```
 
 <Spacer y={3} />
@@ -49,10 +49,10 @@ const MyComponent = () =>  <Button>click me</Button>
 
 `@zeit-ui/react` supports import components when you actually need. e.g.:
 
-```js
+```jsx
 import { Button } from '@zeit-ui/react/components/button'
 
-const MyComponent = () =>  <Button>click me</Button>
+const MyComponent = () =>  <Button>Click Me</Button>
 ```
 
 export default ({ children }) => <Layout meta={meta}>{children}</Layout>