常用全局样式

```
.rflex {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -ms-flex-direction: row;
    -webkit-flex-direction: row;
    flex-direction: row;
}

.cflex {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -ms-flex-direction: column;
    -webkit-flex-direction: column;
    flex-direction: column;
}
.flex_justify_between {
    -webkit-box-pack: space-between;
    -ms-flex-pack: space-between;
    -webkit-justify-content: space-between;
    justify-content: space-between;
}
.flex_justify_around {
    -webkit-box-pack: space-around;
    -ms-flex-pack: space-around;
    -webkit-justify-content: space-around;
    justify-content: space-around;
}
.flex_justify_center {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
}
.flex_justify_end {
    -webkit-box-pack: end;
    -moz-justify-content: flex-end;
    -webkit-justify-content: flex-end;
    justify-content: flex-end;

}
.line_clamp2{
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}
.flex_align_items_center {
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
}
.flex_align_items_end {
    -webkit-box-align: end;
    -moz-align-items: flex-end;
    -webkit-align-items: flex-end;
    align-items: flex-end;
}
.flex_1 {
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
}
.flex_wrap {
    -webkit-flex-wrap: wrap;
    -moz-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    -o-flex-wrap: wrap;
    flex-wrap: wrap;
}
.overflow_1 {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.overflow_2 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}
.user_select_no {
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    -khtml-user-select: none;
    user-select: none;
}
```

### React搭配@emotion/styled常用全局样式

```
// commonStyle.ts

export type CommonStyleType = Record<string, Partial<React.CSSProperties>>

export const commonStyle: CommonStyleType = {
  rFlex: {
    display: 'flex',
    flexDirection: 'row',
  },
  cFlex: {
    display: 'flex',
    flexDirection: 'column',
  },
  flex_justify_around: {
    justifyContent: 'space-around',
  },
  flex_justify_center: {
    justifyContent: 'center',
  },
  flex_justify_end: {
    justifyContent: 'flex-end',
  },
  flex_align_items_center: {
    alignItems: 'center',
  },
  flex_align_items_end: {
    alignItems: 'flex-end',
  },
  flex_1: {
    flex: 1,
  },
  flex_wrap: {
    flexWrap: 'wrap',
  },
  overflow_1: {
    overflow: 'hidden',
    textOverflow: 'ellipsis',
    whiteSpace: 'nowrap',
  },
  user_select_none: {
    userSelect: 'none',
  },
}

// 使用
import styled from '@emotion/styled'

import { Button } from 'antd'

export const StyledTabs = styled(Button)`
  ${({ theme }) => {
    const { commonStyle } = theme
    return {
      ...commonStyle.rFlex,
      width: '100%',
      height: '100%',
      backgroundColor: theme.red,
    }
  }}
`

```

Leanote's Blog

Navigation

Recent Posts

Friend Links