React - Как добавить новые стили к импортированную компоненту с помощью styled-component

Question

Я использую 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. как я могу это сделать?

Answer 1

если ты про передачу из родителя к потомку то можно передать как props через родитель

Ps возможно можно как то иначе но так работает

//тут с условием если передано использовать иначе нет.
export const Test = (props) => {
    return (
        <div className={`${props.clName ? props.clName + ' ' : ''}${styles.ts2}`}>abc</div>
    )
}

БЛОГ НА HUSL

React - Как добавить новые стили к импортированную компоненту с помощью styled-component

Ответы (1 шт):