时间戳

首页 > 解决方案 > React Js 按钮切换/样式化组件

reactjs - React Js 按钮切换/样式化组件

问题描述

我的风格从 'react' 导入 React；从“样式组件”导入样式；

export const DivMenuButton = styled.div`
    border: 0px;
    backgroundColor: #000;
    height: 400px;
    width: 200px;
`;

我的回报：

import { DivMenuButton } from './styles';

export default function Menu() {
    const [open, setOpen] = useState(0); 
    const handleClick = e => {
      e.preventDefault();
      setOpen(!open);
    };
    return (
      <DivMenuButton>
        <Button
          style={{ margin:0, padding: 0, height: "30px", width: "100%", borderRadius:'0px' }}
          onClick={handleClick}
        >
          Button
        </Button>
      </DivMenuButton>  
    );
}

我还想知道如何执行以下操作：

我有一个开放的状态

我的 div 将从 400 像素开始单击按钮将获得 30 像素，但我不知道如何使用样式组件来做到这一点

标签： reactjsstyled-components

解决方案

使用 styled-components道具

试试这个：

export const DivMenuButton = styled.div`
    border: 0px;
    background-color: #000; // was wrong syntax
    height: 400px;
    width: ${props => props.width}
`;

export default function Menu() {
    const [open, setOpen] = useState(false); 
    const handleClick = e => {
      // e.preventDefault(); no need 
      setOpen(!open);
    };

    return (
      <DivMenuButton width={open ? '30px' : '400px'}>
        <button
          style={{ margin:0, padding: 0, height: "30px", width: "100%", borderRadius:'0px' }}
          onClick={handleClick}
        >
          Button
        </button>
      </DivMenuButton>   
    );
}

推荐阅读