[英]React - How to add new styles to a component using styled-component
I am using Styled components.我正在使用样式化组件。 I have two components Navbar and Lessons
我有两个组件 Navbar 和 Lessons
Navbar.jsx导航栏.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课程.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 />
</>
);
}
}
I deliberately removed the rest of the jsx from these components to make the code easier to read.我特意从这些组件中删除了其余的 jsx,以使代码更易于阅读。 Please pay attention to the "NavBarPageLogoDivContainer" in Navbar.jsx, where I specified the value "flex: 1".
请注意 Navbar.jsx 中的“NavBarPageLogoDivContainer”,这里我指定了值“flex: 1”。 When I imported the Navbar into the Lesson component I want to add new styles for the "NavBarPageLogoDivContainer", for example background, border, padding.
当我将 Navbar 导入 Lesson 组件时,我想为“NavBarPageLogoDivContainer”添加新样式,例如背景、边框、填充。 how can I do it?
我该怎么做?
You can use styled
as a function:您可以将
styled
用作函数:
const myNewlyStyledComponent = styled(NavBarPageLogoDivContainer)`
background-color: "red";
height: 0%;
`
and then use the myNewlyStyledComponent
in the rendering part.然后在渲染部分使用
myNewlyStyledComponent
。
To use your new component in the snippet you should change the code:要在代码段中使用新组件,您应该更改代码:
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>
);
}
now you can parametrize the navbar with the enhanced component:现在您可以使用增强组件对导航栏进行参数化:
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在 React 文档中,您可以简要阅读有关组合的内容
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.