kikiqiansun / sagu-ui Goto Github PK

import React from 'react'
import { theme, SaguGlobalStyles, SaguProvider, Button } from 'sagu-ui'

function App() {
  return (
    <SaguProvider theme={theme}>
      <SaguGlobalStyles />
      <Button>Click me</Button>
    </SaguProvider>
  )
}

export default App

import { theme, SaguProvider } from 'sagu-ui'

function App() {
  const customTheme = Object.assign(theme)

  customTheme.colors.primary.medium = '#510763'

  return <SaguProvider theme={customTheme}>...</SaguProvider>
}

import { theme, SaguProvider } from 'sagu-ui'
import { CustomWrapper } from './components/CustomWrapper'

function App() {
  const customTheme = Object.assign(theme)

  customTheme.colors.tertiary = {
    lighter: '#fb973a',
    light: '#e37c1d',
    medium: '#da710f',
    dark: '#9e4c01'
  }

  return (
    <SaguProvider theme={customTheme}>
      <CustomWrapper>...</CustomWrapper>
    </SaguProvider>
  )
}

// components/CustomWrapper.ts
import styled, { css } from 'styled-components'

export const CustomWrapper = styled.div`
  ${({ theme }) => css`
    background: ${theme.colors.tertiary.medium};
  `}
`

import styled from 'styled-components'
import { Button } from 'sagu-ui'

const MyCustomButton = styled(Button)`
  background: red;
`
...

<MyCustomButton>My Button</MyCustomButton>

import { Button } from 'sagu-ui'

...

<Button
  style={{
    background: 'yellow'
  }}
>
  My Button
</Button>

import { Button } from 'sagu-ui'
import './styles.css'

...

<Button className="button-green">My Button</Button>