[英]How to use styled-components that extends from an already styled component?
[英]How do I pass a prop from a Parent styled component to its children's styled components no matter how deep
我有这些样式的组件:
import styled, { css } from 'styled-components'
const Container = styled.div`
background-color: ${props => props.theme === "light" ? "hsl(0, 0%, 98%)" : "hsl(235, 24%, 19%)" };
border-radius: 4px;
box-shadow: ${props => props.theme === "light" ? "0px 35px 50px -15px rgba(194, 195, 214, 0.5)" : "0px 35px 50px -15px rgba(0, 0, 0, 0.5)" };
`
const Footer = styled.footer`
padding: 25px;
display: flex;
align-items: center;
justify-content: space-between;
color: ${props => props.theme === "light" ? "hsl(236, 9%, 61%)" : "hsl(234, 11%, 52%)" };
font-size: 14px;
`
const Nav = styled.nav`
display: flex;
align-items: center;
justify-content: space-between;
color: inherit;
`
const NavItem = styled.a`
cursor: pointer;
display: inline-block;
color: inherit;
&:hover {
color: ${props => props.theme === "light" ? "hsl(235, 19%, 35%)" : "hsl(236, 33%, 92%)" };
}
&:not(:last-of-type) {
margin-right: 15px;
}
${({ active }) =>
active &&
css`
color: hsl(220, 98%, 61%);
`
}
`
const ClearList = styled.p`
color: inherit;
cursor: pointer;
&:hover {
color: ${props => props.theme === "light" ? "hsl(235, 19%, 35%)" : "hsl(234, 39%, 85%)" };
}
`
我有一个名为TodoList
组件, TodoList
带有一个theme
道具,可以像这样传递给样式组件:
const TodoList = ({ theme }) => {
return (
<Container theme={theme}>
<Footer theme={theme}>
<p>5 items left</p>
<Nav>
<NavItem theme={theme}>All</NavItem>
<NavItem theme={theme}>Active</NavItem>
<NavItem theme={theme}>Completed</NavItem>
</Nav>
<ClearList theme={theme}>Clear Completed</ClearList>
</Footer>
</Container>
)
}
export default TodoList
我如何在Container
元素中只调用一次theme
道具,并使所有子元素(如 Clearlist、NavItems 和 Footer)都可以访问它而不显式传递它们
谢谢
您可以使用 ThemeProvider 解决此问题
访问此链接https://styled-components.com/docs/advanced
例子
// Define our button, but with the use of props.theme this time
const Button = styled.button`
color: ${props => props.theme.fg};
border: 2px solid ${props => props.theme.fg};
background: ${props => props.theme.bg};
font-size: 1em;
margin: 1em;
padding: 0.25em 1em;
border-radius: 3px;
`;
// Define our `fg` and `bg` on the theme
const theme = {
fg: "palevioletred",
bg: "white"
};
// This theme swaps `fg` and `bg`
const invertTheme = ({ fg, bg }) => ({
fg: bg,
bg: fg
});
render(
<ThemeProvider theme={theme}>
<div>
<Button>Default Theme</Button>
<ThemeProvider theme={invertTheme}>
<Button>Inverted Theme</Button>
</ThemeProvider>
</div>
</ThemeProvider>
);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.