react-hooks: CSSProperties

1、定義變量

const divStyle: React.CSSProperties = {
    width: "11rem",
    height: "7rem",
    backgroundColor: `rgb(${props.color.red},${props.color.green}, ${props.color.blue})`
  };

使用：

<div style={divStyle} />

2、定義函數

interface SidebarProps {
    isVisible: boolean;
}

const divStyle = (props: SidebarProps): React.CSSProperties=>({
    width: props.isVisible ? "23rem" : "0rem"
})

export const SidebarComponent: React.StatelessComponent<SidebarProps> = props => (
    <div style={divStyle(props)}>
    {props.isVisible}
    </div>
)

const divStyle = (props: SidebarProps): React.CSSProperties=>({
    width: props.isVisible ? "23rem" : "0rem"
})

返回值為React.CSSProperties類型