大家好,我一直在互联网上寻找,试图应用defaultProps到我的组件,但没有什么是工作的自动柜员机。
我将向您展示我的代码:
import styled from "styled-components";
const Button = styled.button`
text-transform: uppercase;
font-weight: bold;
font-size: 12px;
padding: 10px 20px;
border-radius: 5px;
border-style: none;
:focus {
outline: none;
}
${props =>
props.primary &&
`
background-color: ${props.theme.colors.primary};
color: ${props.theme.colors.blank};
:hover {
background-color: ${props.theme.colors.blank};
color: ${props.theme.colors.primary};
border-style: solid;
border-color: ${props.theme.colors.primary}
}
`}
${props =>
props.secondary &&
`
background-color: ${props.theme.colors.secondary};
color: ${props.theme.colors.blank};
:hover {
background-color: ${props.theme.colors.blank};
color: ${props.theme.colors.secondary};
border-style: solid;
border-color: ${props.theme.colors.secondary}
}
`}
${props =>
props.success &&
`
background-color: ${props.theme.colors.success};
color: ${props.theme.colors.blank};
:hover {
background-color: ${props.theme.colors.blank};
color: ${props.theme.colors.success};
border-style: solid;
border-color: ${props.theme.colors.success}
}
`}
${props =>
props.warning &&
`
background-color: ${props.theme.colors.warning};
color: ${props.theme.colors.blank};
:hover {
background-color: ${props.theme.colors.blank};
color: ${props.theme.colors.warning};
border-style: solid;
border-color: ${props.theme.colors.warning}
}
`}
`;
export default Button;
我只想设置defaultProps,如果我不这样做,默认情况下会给出一些样式,例如:
<Button primary>Text</>
这是另一个例子,这有点不同:
import React from "react";
import styled from "styled-components";
const Wrap = styled.input`
${props =>
props.primary &&
`
border: 2px ${props.theme.colors.primary} solid;
`}
${props =>
props.secondary &&
`
border: 2px ${props.theme.colors.secondary} solid;
`}
padding: 5px 10px;
background-color: transparent;
border-radius: 5px;
text-align: center;
:focus {
outline: none;
}
`;
const Input = ({
type,
onChange,
placeholder,
primary,
secondary,
className,
value,
name,
ref,
children
}) => {
return (
<Wrap
type={type}
onChange={onChange}
placeholder={placeholder}
primary={primary}
secondary={secondary}
value={value}
name={name}
ref={ref}
className={className}
>
{children}
</Wrap>
);
};
export default Input;
任何帮助都将是有用的,我正在努力为自己做一个尽可能干净的主题。谢谢。
发布于 2020-05-19 01:29:56
将defaultProps添加到组件是开箱即用的,即使是从样式化组件创建的组件也是如此。您需要在组件上定义defaultProps。下面是一个全新的create-react-app
应用程序的完整示例:
import React from 'react';
import './App.css';
import styled from 'styled-components';
const ButtonBlue = styled.button`
background-color: ${props => props.actuallyMakeItGreen ? 'green' : 'blue'};
`;
ButtonBlue.defaultProps = {
actuallyMakeItGreen : true
}
function App() {
return (
<div className="App">
<ButtonBlue>Cool</ButtonBlue>
</div>
);
}
export default App;
创建一个如下所示的按钮:
import React from 'react';
import './App.css';
import styled from 'styled-components';
const ButtonBlue = styled.button`
background-color: ${props => props.actuallyMakeItGreen ? 'green' : 'blue'};
`;
function App() {
return (
<div className="App">
<ButtonBlue>Cool</ButtonBlue>
</div>
);
}
export default App;
这里唯一的变化是在defaultProps
属性中,我们将actuallyMakeItGreen
缺省为true而不是false。
发布于 2020-05-18 23:30:05
首先,确保你已经将你的道具传递给了样式化组件
<Button props={this.props} />
然后在你的样式化组件中,你应该像这样格式化
const Button = styled.button`
${({ props }) => `
color: ${props.color};
`}
`
https://stackoverflow.com/questions/61880584
复制