Я использую styled-component. У меня есть два компонента, Navbar и Lessons
Navbar.jsx
import React, {Fragment} from 'react';
import n from './Navbar.module.css';
import logo from '../../backgrounds/myLogo2.png'
import {NavLink} from 'react-router-dom';
import styled from "styled-components";
export const NavBarPageLogoDivContainer = styled.div`
&.LogoDivContainer {
flex: 1;
}
`;
export const Navbar = (props) => {
return (
<Fragment>
<div>
<header>
<NavBarPageLogoDivContainer className={"LogoDivContainer"}>
<NavLink className={n.logo} to={'/content'}>
<img style={{margin: 'auto', marginTop: "0", width: "150px", maxWidth: "100%"}} src={logo}
alt="logo"/>
</NavLink>
</NavBarPageLogoDivContainer>
</header>
</div>
</Fragment>
);
}
Lessons.jsx
import React from 'react';
import {Navbar, NavBarPageLogoDivContainer} from "../../../Navbar/Navbar";
import styled from "styled-components";
export class Lessons extends React.Component {
render() {
return (
<>
<Navbar />
</>
);
}
}
Я намеренно удалил остальную часть jsx из этих компонентов, чтобы код было легче читать. Обратите внимание на «NavBarPageLogoDivContainer» в Navbar.jsx, где я указал значение «flex: 1». Когда я импортирую Navbar в компонент Lessons, я хочу добавить новые стили для «NavBarPageLogoDivContainer» с классом <> в компоненте Lessons, например background, border, margin. как я могу это сделать?