[英]How to make styled components mixins with props as css property?
I'm building an app with React and Styled components.我正在使用 React 和 Styled 组件构建一个应用程序。 I'd like to use mixins inside the styles, and pass a CSS property inside this mixin.
我想在样式中使用 mixin,并在这个 mixin 中传递一个 CSS 属性。 I tried like this but it's not working:
我试过这样但它不起作用:
const TestMixin = ({ color, property }) => css`
${property}: ${color === "blue"
? "blue"
: color === "green"
? "green"
: "red"};
&:hover {
${property}: ${color === "blue"
? "red"
: color === "green"
? "blue"
: "green"};
}
`
const Container = styled.div`
background-color: ${TestMixin({
property: "background-color"
})};
`
How could I make this work?我怎样才能使这项工作? Thanks!
谢谢!
You can't to pass CSS property as an object key.您不能将 CSS 属性作为对象键传递。 If you want to create a similar scss mixin you can only pass CSS values to the mixin.
如果你想创建一个类似的 scss mixin,你只能将 CSS 值传递给 mixin。 To set CSS mixin in Container , just use the mixin without CSS property.
要在Container中设置 CSS mixin,只需使用不带 CSS 属性的 mixin。
import styled, { css } from 'styled-components';
const TestMixin = ({ color }) => css`
background-color: ${color === 'blue' ? 'blue' : color === 'green' ? 'green' : 'red'};
&:hover {
background-color: ${color === 'blue' ? 'red' : color === 'green' ? 'blue' : 'green'};
}
`;
const Container = styled.div`
${TestMixin({ color: 'blue' })};
padding: 1rem 2rem;
`;
export const App = () => {
return <Container>Some text</Container>;
};
Try this solution with Container and container props, it is more flexible and customizable.用Container和 container props 试试这个解决方案,它更加灵活和可定制。 If you removed the props, the style will not be applied.
如果您删除了道具,则不会应用该样式。
import styled, { css } from 'styled-components';
interface Colors {
color: string;
hover: string;
}
interface Props {
bgColor?: Colors;
borderColor?: Colors;
textColor?: Colors;
}
const bgMixin = (color: Colors) => css`
background-color: ${color.color};
&:hover {
background-color: ${color.hover};
}
`;
const borderMixin = (color: Colors) => css`
border-color: ${color.color};
&:hover {
border-color: ${color.hover};
}
`;
const textMixin = (color: Colors) => css`
color: ${color.color};
&:hover {
color: ${color.hover};
}
`;
const Container = styled.div<Props>`
padding: 1rem 2rem;
${({ bgColor }) => bgColor && bgMixin(bgColor)}
${({ textColor }) => textColor && textMixin(textColor)}
border-width: 2px;
border-style: solid;
${({ borderColor }) =>
borderColor
? borderMixin(borderColor)
: css`
border-color: transparent;
`}
`;
export const App = () => {
return (
<Container
bgColor={{ color: 'blue', hover: 'red' }}
borderColor={{ color: 'red', hover: 'blue' }}
textColor={{ color: 'white', hover: 'black' }}
>
Styled Components
</Container>
);
};
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.