【发布时间】：2022-01-24 22:50:20
【问题描述】：
如何将我的 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;
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;
}
}
}
【问题讨论】：
-
我已经使用 styled-components 解决了这个问题。样式组件的有用链接--> styled-components.com/docs/basics#react-native 示例-> codesandbox.io/s/lxm7q494kz?file=/src/index.js
标签： html css reactjs sass css-selectors