我有一些样式组件,如下所示:
import styled from 'styled-components';
const Button = styled.button`
background-color: ${props => props.color};
border-radius: 12px;
border: none;
box-shadow: 0 5px 40px 5px rgba(0,0,0,0.24);
color: white;
cursor: pointer;
font-size: 15px;
font-weight: 300;
height: 57px;
width: 331px;
`;
export default Button;
那里没什么特别的。就像它应该的风格一样。
然而,当我在由其他小组件组成的更大的哑组件中实际使用它们时,我发现自己使用样式对象来设置它们的样式。这是为了添加额外的边距、定位和调整大小。
const AuthenticationForm = ({
visible,
}) => {
return (
<CenteredOverlay style={{ display: visible ? 'flex' : 'none' }}>
<Box style={styles.box}>
<img src={require('../images/logo.png')}
style={styles.logo}
alt="logo"
width="60"
height="60"
/>
<TextInput placeholder='email' />
<TextInput placeholder='password' />
<PrimaryButton active>
SIGN IN
</PrimaryButton>
<Hr />
<div style={styles.facebookContainer}>
<span style={styles.alternateLoginText}>
You can also sign in with
</span>
<Button color='#003D82' style={styles.facebookButton}>
Facebook
</Button>
</div>
</Box>
</CenteredOverlay>
);
}
const styles = {
alternateLoginText: {
fontSize: '12px',
color: '#FFFFFF',
opacity: '0.6',
marginRight: '15px',
},
facebookContainer: {
padding: '12px',
display: 'flex',
flexDirection: 'row',
flexWrap: 'wrap',
justifyContent: 'center',
alignItems: 'center',
},
facebookButton: {
width: '222px',
height: '42px',
},
logo: {
position: 'absolute',
top: -30,
},
box: {
position: 'relative',
width: '447px',
},
container: {
textAlign: 'center',
alignSelf: 'center',
},
}
export default AuthenticationForm;
使用样式化的组件感觉很奇怪,有点适得其反,这应该让我的生活更轻松?现在我必须用两种方式写东西?
如果我做错了事,请赐教。