reactjs - 为什么我的样式化组件悬停效果不起作用

Question

这是我第一次使用 styledComponent。有人可以告诉我为什么我对 SubmitBtn 的悬停效果不起作用。我只想在提交按钮上添加悬停效果。

import styled from 'styled-components';



const SubmitBtn = styled.button`
        width: 50%;
        padding: 14px 20px;
        margin: 8px 0;
        display: inline-block;
        border: none;
        borderRadius: 4px;
        cursor: pointer;
        background: green;
        color: white;

        &:hover {
            background: darkgreen;
            color: grey;
        }
    `



<SubmitBtn>Submit Book</SubmitBtn>

标签： reactjshoverstyled-components

Answer 1

您必须返回/渲染组件。

import styled from 'styled-components';

const SubmitBtn = styled.button`
        width: 50%;
        padding: 14px 20px;
        margin: 8px 0;
        display: inline-block;
        border: none;
        borderRadius: 4px;
        cursor: pointer;
        background: green;
        color: white;

        &:hover {
            background: darkgreen;
            color: grey;
        }
    `
export const App = () => <SubmitBtn>Submit Book</SubmitBtn>