React - 如何使用 styled-component 向组件添加新样式

Question

我正在使用样式化组件。我有两个组件导航栏和课程

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，以使代码更易于阅读。 请注意 Navbar.jsx 中的“NavBarPageLogoDivContainer”，我在其中指定了值“flex: 1”。当我将导航栏导入到课程组件​​中时，我想为“NavBarPageLogoDivContainer”添加新样式，例如背景、边框、填充。我该怎么做？

Answer 1

您可以将styled 用作函数：

const myNewlyStyledComponent = styled(NavBarPageLogoDivContainer)`
background-color: "red";
height: 0%;
`

然后在渲染部分使用myNewlyStyledComponent。

要在 sn-p 中使用您的新组件，您应该更改代码：

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 = ({CustomNavBarLogoDivContainer}) => {
    const InjectedContainer = CustomNavBarLogoDivContainer ?? NavBarPageLogoDivContainer

    return (
        <Fragment>
            <div>
                <header>
                    <InjectedContainer className={"LogoDivContainer"}>
                        <NavLink className={n.logo} to={'/content'}>
                            <img style={{margin: 'auto', marginTop: "0", width: "150px", maxWidth: "100%"}} src={logo}
                                 alt="logo"/>
                        </NavLink>
                    </InjectedContainer>
                </header>
            </div>
        </Fragment>
    );
}

现在您可以使用增强组件对导航栏进行参数化：

Lesson.jsx

import React from 'react';
import {Navbar, NavBarPageLogoDivContainer} from "../../../Navbar/Navbar";
import styled from "styled-components";

const myNewlyStyledComponent = styled(NavBarPageLogoDivContainer)`
background-color: "red";
`

export class Lessons extends React.Component {
    render() {
        return (
            <>
                <Navbar 
                     CustonNavBarLogoDivContainer={myNewlyStyledComponent}
                />
            </>
        );
    }
}

Here in react docs you can read briefly about composition