0

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

1 ответ 1

0

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

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

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

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.