使用样式组件让你的 CSS 动态化

styled-components帮助你在 React 中编写更优秀的 CSS。它允许你将所有组件的样式封装到一个简洁的、仅包含样式的组件中。

因此，不要这样：

.wrapper{
  font-family: sans-serif;
}

.button {
  background: #2b2b2b;
  color: white;
  font-size: 24px;
  padding: 12px;
  cursor: pointer;
}

还有这个

import React from "react";
import './styles.css';

export default function App() {
  return (
    <div class="Wrapper">
      <button class="Button">Hello, I am a Button</button>
    </div>
  );
}

你有类似的东西：

import React from "react";
import styled from "styled-components";

const Wrapper = styled.div`
  font-family: sans-serif;
`;

const Button = styled.button`
  background: #2b2b2b;
  color: white;
  font-size: 24px;
  padding: 12px;
  cursor: pointer;
`;

export default function App() {
  return (
    <Wrapper>
      <Button>Hello, I am a Button</Button>
    </Wrapper>
  );
}

这看起来可能没什么大的变化。我知道，我知道！看起来我们所做的只是将两个文件合并成一个文件……

然而，通过这样做，我们将我们的样式集成到其中 styled-components，现在库控制我们的 CSS，它可以做各种很酷的事情，例如：

自动注入关键 CSS
自动添加供应商前缀
主题和动态样式

这为我们节省了大量时间，使我们能够专注于重要的事情，例如为按钮添加边框等。

现在，在简要介绍完的奇妙之处之后styled-components，让我们来关注一下动态造型部分。

动态造型`styled-components`

动态样式的目的在于节省时间并减少 CSS 的编写。

假设你有一个主按钮和一个辅助按钮。它们非常相似，但你希望主按钮具有鲜艳的颜色，以便人们真正点击它。

您可以通过primary向您的<Button />...添加属性来实现这一点。

export default function App() {
  return (
    <Wrapper>
      <Button>Hello, I am a Button</Button>
      <Button primary>Hello, I am a Primary Button</Button>
    </Wrapper>
  );
}

...并在您的样式组件上处理该新属性，就像您处理组件道具一样！

const Button = styled.button`
  background: ${props => props.primary ? "#6495ED" : "#2b2b2b"};
  color: white;
  font-size: 24px;
  padding: 12px;
  cursor: pointer;
`;

“但如果我的组件需要大量定制怎么办？”

你的按钮可能需要更加灵活，同时又能保持一些基本样式。或许你需要一个主按钮，同时带有圆角和漂亮的box-shadow效果。

你可以使用与前面示例相同的逻辑来实现这一点。但这可能会相当重复，请看：

const Button = styled.button`
  background: ${props => props.primary ? "#6495ED" : "#2b2b2b"};
  border-radius: ${props => props.round ? "4px" : "0"};
  box-shadow: ${props => props.shadow ? "2px 2px 2px rgba(0, 0, 0, 0.5)" : "none"};
  color: white;
  font-size: 24px;
  padding: 12px;
  cursor: pointer;
`;

您可以在这里做的是“抬起”道具并做类似的事情：

const Button = styled.button(
  ({ primary, round, shadow }) => `
    background: ${primary ? "#6495ED" : "#2b2b2b"};
    border-radius: ${round ? "4px" : "0"};
    box-shadow: ${shadow ? "2px 2px 2px rgba(0, 0, 0, 0.5)" : "none"};
    color: white;
    font-size: 24px;
    padding: 12px;
    cursor: pointer;
  `
);

这样，您就不必逐行“导入”每个道具，而是在样式一开始就进行导入，这样您就可以 100% 确定是什么让它变得动态！

请记住，虽然这种技术很酷并且使您的样式组件看起来更精简，但需要大量定制可能是糟糕抽象的标志。

因此，在添加第四个（或第五个）动态样式规则之前，请确保您不应该真正创建新的样式组件！

今天就到这里。感谢阅读！

我（在最后一刻）为Hashnode Bootcamp II 的第一个作业写了这篇文章。

请务必查看所有其他 Bootcamp 文章并在 Twitter 上关注我！

文章来源：https://dev.to/vtrpldn/styled-components-dealing-with-dynamic-styling-1ja3

使用样式组件让你的 CSS 动态化

使用样式组件让你的 CSS 动态化

动态造型styled-components

“但如果我的组件需要大量定制怎么办？”

动态造型`styled-components`