Question

我有几个样式的组件，如：

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;

使用样式组件会让人感觉很奇怪，有点适得其反，这应该让我的生活变得更轻松？现在我必须用两种方式写东西？

如果我做错事，请告诉我。

Answer 1

您可以使用extend方法，无需在两种样式组合方式之间进行混合！

import styled from 'styled-components';

const Button = styled.button`
  background-color: ${props => props.color};
  ...etc
`;

export default Button;

const FacebookButton = Button.extend`
   width: '222px';
   height: '42px';
   color='#003D82'
`;
const AuthenticationForm = ({
  visible,
}) => (
  <FacebookButton>
    Facebook
  </FacebookButton>
)

Answer 2

是的，您错过了如何实际使用样式化组件，如果您想使用样式化组件设置任何其他组件的样式，您可以使用此模式：

const ButtonStyle = styled(Button)`
    color: #003D82;
    width: '222px';
    height: '42px';
`;

<ButtonStyle>
     Facebook
 </ButtonStyle>

并照常使用

更多here

React + Styled Components：混合CSS和JS样式对象？

2 个答案: