目录

样式模块(style module)

优质
小牛编辑
131浏览
2023-12-01

一般来说, 在组件内写死(hard code)样式应该是要被避免的.
这些有可能被不同的UI组件分享的样式应该被分开放入对应的模块中.

  1. // 样式模块
  2. export const white = '#fff';
  3. export const black = '#111';
  4. export const blue = '#07c';
  5. export const colors = {
  6. white,
  7. black,
  8. blue
  9. };
  10. export const space = [
  11. 0,
  12. 8,
  13. 16,
  14. 32,
  15. 64
  16. ];
  17. const styles = {
  18. bold: 600,
  19. space,
  20. colors
  21. };
  22. export default styles

Usage

  1. // button.jsx
  2. import React from 'react'
  3. import { bold, space, colors } from './styles'
  4. const Button = ({
  5. ...props
  6. }) => {
  7. const sx = {
  8. fontFamily: 'inherit',
  9. fontSize: 'inherit',
  10. fontWeight: bold,
  11. textDecoration: 'none',
  12. display: 'inline-block',
  13. margin: 0,
  14. paddingTop: space[1],
  15. paddingBottom: space[1],
  16. paddingLeft: space[2],
  17. paddingRight: space[2],
  18. border: 0,
  19. color: colors.white,
  20. backgroundColor: colors.blue,
  21. WebkitAppearance: 'none',
  22. MozAppearance: 'none'
  23. };
  24. return (
  25. <button {...props} style={sx}/>
  26. )
  27. };