大家好,我一直在网上寻找如何将默认属性应用到我的组件上,但目前还没有成功。
我将展示我的代码:
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;
任何帮助都将是有用的,我正在尝试制作一个尽可能简洁的主题。谢谢。