下記画像の「Controls」内で、他のプロパティのように、
pseudo_class.hover.background_color
/ pseudo_class.disabled.background_color
等の色を「red
」のように文字列で色を指定したいです。
ネット上で粗方調べたのですが、方法が分からず困っています。
もしご存じの方がいらっしゃれば、お教え頂けると幸いです。
どうぞよろしくお願いいたします。
src/components/atoms/Button/index.tsx
import { styled } from "styled-components" ;
import { Responsive } from "types/Responsive" ;
import { convertToCSSProperty } from "utils";
// [ Buttonコンポーネントが親から受け取るプロパティの型 ]
// ・ここで指定している型以外は受け付けない
export type Button_inputtable_props = {
font_size? : Responsive<string> ;
font_weight? :Responsive<string> ;
color? : string ;
background_color? : string ;
width? : Responsive<string> ;
height? : Responsive<string> ;
pseudo_class? : {
hover? : {
background_color? : string ;
} ;
disabled? : {
background_color? : string ;
} ;
} ;
} ;
// [ ボタンについてのスタイル付きコンポーネント ]
const Button = styled.button<Button_inputtable_props>`
${(input_props) => convertToCSSProperty("font-size", input_props.font_size)} ;
${(input_props) => convertToCSSProperty("font-weight", input_props.font_weight)} ;
${(input_props) => convertToCSSProperty("color", input_props.color)}
${(input_props) => convertToCSSProperty("background-color", input_props.background_color)}
${(input_props) => convertToCSSProperty("width", input_props.width)}
${(input_props) => convertToCSSProperty("height", input_props.height)}
&:hover {
${(input_props) => convertToCSSProperty("background-color", input_props?.pseudo_class?.hover?.background_color)}
}
&:disabled {
${(input_props) => convertToCSSProperty("background-color", input_props?.pseudo_class?.disabled?.background_color)}
}
` ;
export default Button ;
src/components/atoms/Button/index.stories.tsx
import { Meta, StoryFn } from "@storybook/react" ;
import Button from "./index" ;
import custom_view_ports from "utils/CustomViewPorts" ;
export default {
title : "Atoms/Button",
component : Button,
argTypes : {
// [ <Button></Button>で囲まれる子要素 ]
children : {
// ・入力方法を指定
// text -> 入力ボックスを生成
control : { type : "text" },
description : "ボタンテキスト",
table : {
// ・入力する型を指定
type : { summary : "string" },
},
},
// [ disabledプロパティの設定 ]
disabled : {
// ・トグルスイッチ形状の入力方式
control : { type : "boolean" },
table : {
type : { summary : "boolean" },
},
},
// [ 横幅(px形式で入力) 例 : 100px ]
width : {
control : { type : "text" },
table : {
type : { summary : "string" },
},
},
// [ 縦幅(px形式で入力) 例 : 100px ]
height : {
control : { type : "text" },
description : "縦幅",
table : {
type : { summary : "string" },
},
},
// [ ボタンテキストの色 ]
color : {
control : { type : "text" },
table : {
type : { summary : "string" },
},
},
// [ ボタンの背景色 ]
background_color : {
control : { type : "text" },
table : {
type : { summary : "string" },
},
},
},
parameters : {
viewport : { viewports : custom_view_ports },
},
} as Meta<typeof Button> ;
// [ Storybookを開いた際のデフォルトのボタン ]
export const Test : StoryFn<typeof Button> = (args) => {
return (
<Button {...args}>
</Button>
) ;
} ;
Storybook画面