npm 包 styled-stronger 使用教程-JavaScript中文网-JavaScript教程资源分享门户

简介

styled-stronger 是一款基于 styled-components 的增强工具包，它在 styled-components 的基础上，提供了更加简单，直观，强大的 API 等。在 React 应用中使用 styled-components 能够带来很多的好处，比如：模块化，强类型，易于重用等。

安装

npm install styled-stronger

使用

在 React 应用项目中正常引入 styled-components , 在需要的组件中引入 styled-stronger/css，即可开始使用它提供的API。

-- -------------------- ---- -------
------ ------ ---- --------------------
------ - --- - ---- ------------------

----- ------------- - --------------
  -------
    ------ --------
    ------- -------
    ------------- ------
    ---------------- ----------
    ------ -------
    --------- -------
    ---------- -- --- --- ------- -- -- ------
  ---
--

-------- ----- -
  ------ --------------------------------------
-

------ ------- ----

在上面的代码中，我们引入了 styled-stronger/css 并在 ButtonWrapper 组件的样式中使用了它提供的API，这些API在我们平常的开发中会非常实用。例如，css 函数中支持任意类型的样式，包括数字和字符串，快速编写合适的样式属性。此外， css 函数也支持嵌套，也支持计算属性。

API

背景颜色

backgroundColor

backgroundColor: string

可以设置组件的背景颜色，值可以是一个字符串，例如 #000，red 等。
```
const Box = styled.div`
  ${css({
    width: '100px',
    height: '100px',
    backgroundColor: 'red',
  })}
`;
```
gradient

gradient: string

可以设置组件的背景渐变色，值可以是一个字符串，例如 linear-gradient(90deg, red, yellow)。
```
const Box = styled.div`
  ${css({
    width: '100px',
    height: '100px',
    gradient: 'linear-gradient(90deg, red, yellow)',
  })}
`;
```

边框样式

border

border: string

可以设置组件的边框样式，值可以是一个字符串，例如 1px solid #000。

const Box = styled.div`
  ${css({
    width: '100px',
    height: '100px',
    border: '1px solid #000',
  })}
`;

borderRadius

borderRadius: string

可以设置圆角边框，值可以是一个字符串，例如 4px。

const Box = styled.div`
  ${css({
    width: '100px',
    height: '100px',
    borderRadius: '4px',
  })}
`;

盒子模型

padding

padding: string

可以设置组件的内边距，值可以是一个字符串，例如 10px。

const Box = styled.div`
  ${css({
    width: '100px',
    height: '100px',
    padding: '10px',
  })}
`;

margin

margin: string

可以设置组件的外边距，值可以是一个字符串，例如 10px。

const Box = styled.div`
  ${css({
    width: '100px',
    height: '100px',
    margin: '10px',
  })}
`;

boxShadow

boxShadow: string

可以设置盒子的阴影，值可以是一个字符串，例如 0 2px 6px rgba(0, 0, 0, 0.2)。

const Box = styled.div`
  ${css({
    width: '100px',
    height: '100px',
    boxShadow: '0 2px 6px rgba(0, 0, 0, 0.2)',
  })}
`;

字体样式

fontSize

fontSize: string

可以设置组件中字体的大小，值可以是一个字符串，例如 18px。
```
const Box = styled.div`
  ${css({
    width: '100px',
    height: '100px',
    fontSize: '18px',
  })}
`;
```
fontWeight

fontWeight: string

可以设置组件中字体的粗细，值可以是一个字符串，例如 bold。
```
const Box = styled.div`
  ${css({
    width: '100px',
    height: '100px',
    fontWeight: 'bold',
  })}
`;
```
fontStyle

fontStyle: string

可以设置组件中字体的样式，值可以是一个字符串，例如 italic。
```
const Box = styled.div`
  ${css({
    width: '100px',
    height: '100px',
    fontStyle: 'italic',
  })}
`;
```

color

color: string

可以设置组件中字体的颜色，值可以是一个字符串，例如 #000。

const Box = styled.div`
  ${css({
    width: '100px',
    height: '100px',
    color: '#000',
  })}
`;

总结

styled-stronger 是一款非常实用的增强工具包，它为我们在使用 styled-components 时提供了额外的便捷性，能够极大的提高我们的开发效率。在编写样式时，我们只需要使用它提供的API，就可以更快更好地完成我们的工作，并且还能保证代码的可维护性和重用性。希望你在学习使用 styled-stronger 时能够有所收获，同时也能在以后的工作中减轻自己的负担。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/60055bf581e8991b448d997e

npm 包 styled-stronger 使用教程

简介

安装

使用

API

背景颜色

backgroundColor

gradient