0

下記画像の「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画面

Storybook画面

0

この質問に回答するには、ログインする必要があります。

のタグが付いた他の質問を参照する。