如何使用 Styled-Components 自定义包装的 Antd 按钮？

Question

我很难定位包装 antd 按钮的组件。我想要做的就是将 <button> 标记修改为具有 width: 100%，但我需要从组件外部进行。这是我拥有的：

LogoutButton.js

import { useAuth0 } from "@auth0/auth0-react";
import { clearSessionCookie } from 'sessions';
import { Button } from 'antd';


function LogoutButton () {
  const { logout } = useAuth0();

  const handleLogout = () => {
    clearSessionCookie();
    return logout({ returnTo: process.env.REACT_APP_AUTH_LOGOUT_REDIRECT_URI });
  }

  return (
    <Button danger type="primary" onClick={handleLogout}>
      Log Out
    </Button>
  );
};

export default LogoutButton;

HomePage.js

import { LogoutButton } from 'components';
import { Menu } from 'antd';
import { UserOutlined, VideoCameraOutlined } from '@ant-design/icons';
import styled from 'styled-components';

const ButtonContainer = styled.li`
    padding: 0 16px;
`;

const StyledLogoutButton = styled(LogoutButton)`
    width: 100%;
    background-color: green;
`;

function HomePage() {

    return (
        <Menu theme="dark" mode="inline" defaultSelectedKeys={['1']}>
            <Menu.Item key="1" icon={<UserOutlined />}>
                nav 1
            </Menu.Item>
            <Menu.Item key="2" icon={<VideoCameraOutlined />}>
                nav 2
            </Menu.Item>
            <ButtonContainer>
                <StyledLogoutButton />
            </ButtonContainer>
        </Menu>
    );
}

export default HomePage;

问题：

修改 HomePage.js 中的 StyledLogoutButton，以便将 LogoutButton 宽度正确设置为 100%。我尝试了 &、&&&、使用自定义 class...似乎没有任何效果。我无法定位 <button> html 标签。

非常感谢任何帮助。

Answer 1

<LogoutButton width="auto" />


function LogoutButton ({width}) {
  const { logout } = useAuth0();

  const handleLogout = () => {
    clearSessionCookie();
    return logout({ returnTo: process.env.REACT_APP_AUTH_LOGOUT_REDIRECT_URI });
  }

  return (
    <Button width={width} danger type="primary" onClick={handleLogout}>
      Log Out
    </Button>
  );
};

const Button = styled.button`
    width: ${({width}) => width ? width : 'auto'}
`;