自定义CSS随机应用

Question

我将 scss 和 styled-components 一起使用。最近，我不知道为什么我开始看到在最终渲染上应用哪些样式的竞争情况。有时，通常，当第一次/第二次加载应用程序时，会应用来自 scss 的样式，并且当我进行几次硬刷新时，会应用使用样式组件编写的自定义样式。您知道为什么会发生这种情况吗？我不想放！修复它在任何地方都很重要。我想了解一下。

下面的截图显示 _sidebar.scss 覆盖了我写的 .sidebar 样式。

经过一番硬刷新后：

刷新一番后，又出现了另一种方式：

这是一个组件

/* eslint-disable jsx-a11y/anchor-is-valid */
import React from 'react';
import SidebarLinks from './SidebarLinks';
import FormSelectPrinter from "../printer/FormSelectPrinter"
import sidebarData from "../data/";
import {ModalConsumer} from "../components/ModalContext";
import Modal from "../components/Modal";
import { createGlobalStyle } from "styled-components";


const GlobalSidebarStyle = createGlobalStyle`
    .sidebar {
        background-color: #303b4a;
        padding-left: 0;
        padding-right: 0;
        padding-bottom:40px;
        width: 240px;
    }

    .user__info {
        background: #607D8B;
    }

    .user__info:hover {
        background: #607D8B;
    }

    .user__name {
        color: #fff;
    }

    .user__email {
        color: #303b4a;
    }
    .dropdown-user-menu {
        background: #607D8B;
        position: relative;
        width: 100%;
        float: none;
    }

    .dropdown-select-language {
        background: rgba(96, 125, 139, 0.6);
        box-shadow: 0 4px 20px rgba(0,0,0,0.9);
        right: -26px;
        top: 53px;
        user-select: none;
    }

    .dropdown-user-item:hover, .dropdown-user-item:focus {
        color: black !important;
    }

    .dropdown-user-item {
        color: white !important;
    }

    .navigation {
        li {
            a {
                color: #adb5bd;
                padding-left: 15px;
                &.active {
                    color: white !important;
                }
            }
        }
    }

    .navigation li:not(.navigation__active):not(.navigation__sub--active) a:hover {
        background-color: rgba(0, 0, 0, 0.19);
        color: white;
    }

    .id-green {
        background-color: #73983F;
    }

    .language-text-color {
        color: white !important;
    }
    .profile_image_style {
        border-radius: 100%;
        width: 80px;
        height: 80px;
    }
`

function Sidebar(props) {

    const ModalSelectPrinter = ({onClose, ...otherProps}) => {
        return (
            <Modal>
                <FormSelectPrinter onClose={onClose} md={12}></FormSelectPrinter>
            </Modal>
        )
    };
  

    return (
        <>
        <GlobalSidebarStyle />
        <aside className={`sidebar ${props.sidebarToggled? 'toggled' : ''}`}>
            <div className="scrollbar-inner">
                <div style={{margin: '50px 0 30px 0'}} onClick={() => props.toggleUserInfo()}>
                    <div className={`user__info ${props.userInfoShown? 'show' : ''}`}>
                        <div style={{width: '100%', textAlign: 'center'}}>
                            <div className="user__name">{user.person === null ? user.name : user.person.full_name}</div>
                            <div className="user__email">{user.email}</div>
                        </div>
                    </div>
                    <div
                        className={`dropdown-menu dropdown-user-menu ${props.userInfoShown? 'show' : ''}`}>
                        <ModalConsumer>
                            {({showModal}) => (
                                <a className="dropdown-item dropdown-user-item" onClick = {()=>showModal(ModalSelectPrinter, {})}>Select</a>
                            )}
                        </ModalConsumer>
                        <a className="dropdown-item dropdown-user-item" onClick={() => props.logout()}>Log out</a>
                    </div>
                </div>
                <SidebarLinks sidebarData={sidebarData} toggleSidebar={props.toggleSidebar}></SidebarLinks>
            </div>
        </aside>
        </>
    )
}

export default Sidebar;

Answer 1

在 styled-components 中，createGlobalStyle 是一个实用函数，用于创建全局样式组件。全局样式是适用于整个文档而不是仅限于特定组件的 CSS 规则。这对于定义样式（例如正文样式、重置、字体或其他全局布局规则）非常有用。

在你的情况下，我不会使用该函数，而是有一个专用于侧边栏组件的 SCSS 文件或样式组件对象 - 这将是最佳实践并允许封装。