mincho/examples/react-babel/src/App.tsx at 1bb50106844d162d26f1f470ef0cae0565461708 · mincho-js/mincho · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
import { styled } from "@mincho-js/react";

const BaseComponent = styled.div({
  base: {
    fontWeight: "bold",
  },
});

const Container = styled(BaseComponent, {
  base: {
    backgroundColor: "red",
    padding: "20px",
    margin: "20px",
    borderRadius: "5px",
    color: "white",
    fontFamily: "sans-serif",
  },
  variants: {
    size: {
      small: {
        padding: "10px",
      },
      medium: {
        padding: "20px",
      },
      large: {
        padding: "30px",
      },
    },
    color: {
      red: {
        backgroundColor: "red",
      },
      blue: {
        backgroundColor: "blue",
      },
    },
  },
  compoundVariants: ({ size, color }) => [
    {
      condition: [size.small, color.blue],
      style: {
        color: "green",
      },
    },
    {
      condition: [size.large, color.blue],
      style: {
        color: "yellow",
      },
    },
  ],
  defaultVariants: {
    size: "medium",
    color: "red",
  },
});

function App() {
  return (
    <Container size="large" color="blue">
      Hello World
    </Container>
  );
}

export default App;