o-gi

$zindex-scale:(
  8:  10000000,
  7:  1000000,
  6:  100000,
  5:  10000,
  4:  1000,
  3:  100,
  2:  10,
  1:  1,
  0:  -1

o-gi

%btn {
  border-radius: 100px;
  display: inline-block;
  text-align: center;
  height: 50px;
  line-height: 49px;
  padding: 0 32px;
}

.btn {

o-gi

$breakpoints: (
    'sm': 'screen and (max-width: 480px)',
    'md': 'screen and (min-width: 481px)',
    'lg': 'screen and (min-width: 1000px)',
    'xl': 'screen and (min-width: 1200px)',
    'all': 'screen and (min-width: 0px)',
) !default;

@mixin mq($breakpoint) {
    @if map-has-key($breakpoints, $breakpoint) {

o-gi

import { Button, ButtonProps, withTheme } from "@material-ui/core";
import { Palette } from "@material-ui/core/styles/createPalette";
import React, { ComponentType } from "react";
import styled from "styled-components";

type StyledSize = "lg" | "md" | "sm" | undefined;
type StyledColor = "primary" | "dark" | "white";

export interface Props extends ButtonProps {
  children: React.ReactNode;

o-gi

/* eslint-disable react/jsx-props-no-spreading */
import { Button, ButtonProps, SvgIcon } from "@material-ui/core";
import { styled, Theme, withTheme } from "@material-ui/core/styles";
import { ComponentChildren, FunctionalComponent } from "preact";

type Size = "lg" | "md" | "sm" | undefined;
type Color = "primary" | "dark" | "white" |;

export interface AppButtonProps extends ButtonProps {
  children: ComponentChildren;

o-gi

/*
  with babel-plugin-import
  https://material-ui.com/guides/minimizing-bundle-size/
*/

/* eslint-disable react/jsx-props-no-spreading */
import { Box, BoxProps } from "@material-ui/core";
import { styled } from "@material-ui/core/styles";

type StyledAspectRatioProps = {

o-gi

ReactのStateとファイル/フォルダパターンについて

https://twitter.com/t4traw/status/1485750991844933633

今回のハンバーガーメニューボタンをタップしたあとにサイドバー（Drawer）を開閉したいというパターンについて 個人的に下記のやり方が良いんじゃないかなと思いました。

おすすめフォルダ構成

o-gi

// 関数
function test (arg: string) {
  console.log(arg)
}

// 関数の別の書き方
const test = (arg: string) => {
  console.log(arg)
}

o-gi

Failed to load resource: the server responded with a status of 404 ()

engine-a32392a848.js:24 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'getAllPaths')
    at t.serializeTreeToStructureUpdate (engine-a32392a848.js:24:314541)
    at n.update (engine-a32392a848.js:9:578374)
    at n.update (engine-a32392a848.js:9:400840)
    at e.onUpdate (engine-a32392a848.js:20:399552)
    at t.onLoadCanvasUpdate (engine-a32392a848.js:20:867534)
    at t.<anonymous> (engine-a32392a848.js:20:870693)
    at engine-a32392a848.js:9:71600

o-gi

@function pxToRem($value) {
  $remValue: ($value / 16) + rem;
  @return $remValue;
}

@mixin font-size() {
  $font-size-list: 10 11 12 14 16 20 24 28 32 40 64;
  
  @each $value in $font-size-list {
    .text-#{$value} {