如何将我的CSS更改仅应用到React JS中的一个组件。 CSS 文件包含 body 标签和其他也会影响其他组件的标签

问题描述 投票：0回答：2

如何将我的 css 更改仅应用到 React js 中的一个组件。 CSS 文件包含 body 标签和其他也会影响其他组件的标签。我已将 Id 添加到应应用此 css 规则的所需组件中的每个元素。但它不起作用。以下是文件。我需要将 css 规则仅应用于 About.jsx 组件，而不影响其他组件。预先感谢。

关于.jsx组件

import React from 'react';
import 'react-toastify/dist/ReactToastify.css';
import LinkedInIcon from '@mui/icons-material/LinkedIn';
import TwitterIcon from '@mui/icons-material/Twitter';
import LocalPostOfficeIcon from '@mui/icons-material/LocalPostOffice';
import { blue } from '@mui/material/colors';
import logo from '../assets/profile-pic.jpeg';
       
const About = () => {                              

    return (
        <body id='about1'>
            <section id='about2'>
                <div className='container' id='about3'>
                    <div className='card' id='about4'>
                        <div className='content' id='about5'>
                            <div className='imgBx' id='about6'>
                                <img src={logo} alt='Logo' id='about7' />
                            </div>
                            <div className='contentBx' id='about8'>
                                <h3 id='about9'>Rishi<br /><span id='about10'>Software Developer</span></h3>
                            </div>
                        </div>
                        <ul className='sci' id='about11'>
                            <li style={{ '--i': '1' }} id='about12'>
                                <a href='#' id='about13'><LinkedInIcon fontSize='small' sx={{ color: blue[500] }} /></a>
                            </li>
                            <li style={{ '--i': '2' }} id='about14'>
                                <a href='#' id='about15'><TwitterIcon fontSize='small' sx={{ color: blue[500] }} /></a>
                            </li>
                            <li style={{ '--i': '3' }} id='about16'>
                                <a href='#' id='about17'><LocalPostOfficeIcon fontSize='small' sx={{ color: blue[500] }} /></a>
                            </li>
                        </ul>
                    </div>
                </div>
            </section>
            </body>
    );
}

export default About;

关于.css

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300&display=swap');
*
{
margin: 0;
padding: 0;
font-family: 'Poppins', sans-serif;
}
body
{
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
background: #161623;
min-height: 100vh;
}
section::before
{
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(#f00,#f0f);
clip-path: circle(30% at right 70%);
}
section::after
{
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(#2196f3,#e91e63);
clip-path: circle(20% at 10% 10%);
}
.container
{
position: relative;
z-index: 1;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
margin: 40px 0;
}
.container .card
{
position: relative;
width: 300px;
height: 400px;
background: rgba(255, 255, 255, 0.05);
margin: 20px;
box-shadow: 0 15px 35px rgba(0,0,0,0.2);
border-radius: 15px;
display: flex;
justify-content: center;
align-items: center;
backdrop-filter: blur(10px);
}
.container .card .content
{
position: relative;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
opacity: 0.5;
transition: 0.5s;
}
.container .card:hover .content
{
opacity: 1;
transform: translateY(-20px);
}
.container .card .content .imgBx
{
position: relative;
width: 150px;
height: 150px;
border-radius: 50%;
overflow: hidden;
border: 10px solid rgba(0,0,0,0.25);
}
.container .card .content .imgBx img
{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.container .card .content .contentBx h3
{
color: #fff;
text-transform: uppercase;
letter-spacing: 2px;
font-weight: 500;
font-size: 18px;
text-align: center;
margin: 20px 0 10px;
line-height: 1.1em;
}
.container .card .content .contentBx h3 span
{
font-weight: 300;
font-size: 12px;
text-transform: initial;
}
.container .card .sci
{
position: absolute;
bottom: 50px;
display: flex;
}
.container .card .sci li
{
list-style: none;
margin: 0 10px;
transform: translateY(40px);
transition: 0.5s;
opacity: 0;
}
.container .card:hover .sci li
{
transform: translateY(0px);
opacity: 1;
}
.container .card .sci li a
{
color: #fff;
font-size:24px;
}

其他Css和scss文件--> 文件1

return (
    <React.Fragment>
    <HeaderContainer>
        <LogoContainer to='/'>
            <Logo className='logo' />
        </LogoContainer>            
        <OptionsContainer>                
            <Profile />
            </OptionsContainer>
        </HeaderContainer>                  
        <HomePageContent />            
    </React.Fragment>
);

    import styled from 'styled-components';
    import { Link as RRDLink } from 'react-router-dom'
    
    export const HeaderContainer = styled.div`
        height: 70px;
        width: 100%;
        display: flex;
        justify-content: space-between;
        margin-bottom: 25px;
    `;
    
    export const FooterContainer = styled.div`    
        position: absolute;
        width: 100%;
        bottom: 0;
        height: 50px;
        padding:10px;    
        display: block;   
        text-align:center;
        float:left;
        margin-top:50px;
    `;
    
    export const LogoContainer = styled(RRDLink)`// this link is a custom component thats why we did like styled(Link)
         height: 100%;
          width: 70px;
          padding: 25px;      
    `;
    
    export const OptionsContainer = styled.div`      
          height: 100%;
          width: 70px;
          padding: 15px;
    `;
    
    export const OptionLink = styled(RRDLink)`
          padding: 10px 10px;
          cursor: pointer;
          color: black;
          text-decoration: none;
    `;

文件2

 const HomePage = () => (
    <HomePageContainer>
        <Directory />
    </HomePageContainer>
    );


import styled from 'styled-components';

export const HomePageContainer = styled.div`
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px 80px; 
`;

文件3

const Directory = ({ sections }) => (
    <div className='directory-menu'>
        {
            sections.map(({ id, ...otherSectionProps }) => (
                <MenuItem key={id} {...otherSectionProps} />
            ))
        }
    </div>
    );

        .directory-menu {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
      }

文件4

 const MenuItem = ({ title, imageUrl, size, history, linkUrl, match }) => (
    <div
        className={`${size} menu-item`}
        onClick={() => history.push(`${match.url}${linkUrl}`)}
    >

        <div className='background-image' style={{ backgroundImage: `url(${imageUrl})` }}></div>
        <div className='content'>
            <h1 className='title'>{title.toUpperCase()}</h1>                
        </div>
    </div>
);

.menu-item {
        min-width: 30%;
        height: 240px;
        flex: 1 1 auto;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px solid black;
        margin: 0 7.5px 15px;
        overflow: hidden;
    
        &:hover {
            cursor: pointer;
    
            & .background-image {
                transform: scale(1.1);
                transition: transform 6s cubic-bezier(0.25, 0.45, 0.45, 0.95);
            }
    
            & .content {
                opacity: 0.9;
            }
        }
    
        &.large {
            height: 380px;
        }
    
        &:first-child {
            margin-right: 7.5px;
        }
    
        &:last-child {
            margin-left: 7.5px;
        }
    
        .background-image {
            width: 100%;
            height: 100%;
            background-position: center;
            background-size: cover;
        }
    
        .content {
            height: 90px;
            padding: 0 25px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            border: 1px solid black;
            background-color: white;
            opacity: 0.7;
            position: absolute;
    
            .title {
                font-weight: bold;
                margin-bottom: 6px;
                font-size: 22px;
                color: #4a4a4a;
            }
    
            .subtitle {
                font-weight: lighter;
                font-size: 16px;
            }
        }
    }
html css reactjs sass css-selectors
2个回答
1
投票

也许你应该看看“React中的CSS模块样式表”，这里添加一些包含一些信息的链接

https://create-react-app.dev/docs/adding-a-css-modules-stylesheet/

https://reactgo.com/react-app-css-modules/

0
投票

我遇到了类似的问题：我有一个带有专用 css 的组件，它会影响组件之外的其他元素。一个快速解决方法是将所有专用 css 包装在一个类中，该类仅用于组件的根 elem。这样专用的 css 规则就不会“滑出”我的组件

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.