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

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

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

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

<ButtonStyle>
     Facebook
 </ButtonStyle>

照常使用

更多here

Answer 2

您可以使用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>
)