vite4加react18加ts-样式隔离篇

vite4加react18加ts-安装篇； 最近从vue3转型学习了，react相关技术架构，去有意识的去学习了相关东西，内容比较实用，没有引入太多原理和概念，就是最直接最实用的记录下来；

方案一：module 个人采用这中方式

创建文件写入样式：

// 创建index.module.less或index.module.sass文件  
.root {
  // 此处，使用 global 包裹其他子节点的类名。此时，这些类名就不会被处理，在 JSX 中使用时，就可以用字符串形式的类名
  // 如果不加 :global ，所有类名就必须添加 styles.xxx 才可以
  :global {
    .my_button{
      text-align: center;
      background: @darkColor4;
    }
  }
  .my_button{
    text-align: center;
    background: @darkColor4;
  }
}

组件中使用：

// 引入你定义的less或sass
import myStyles from './index.module.less'
function Login() {
	return (
  	<div className={myStyles.root}>
    	// 如果是:global中的可以直接使用哦
    	<div className='my_button'>my button</div>
      // 如果是:global外部定义需要单独添加
      <div className={myStyles.my_button}>my button</div>
    </div>
  )
};
export default Login;

方案2：styled-components

注意

• 这种的方式是不能使用全局定义的less或sass方法和变量，
• 个人不太喜欢，如果没有这方面的需求的话可以使用这个方案

styled-components中文官网

https://github.com/hengg/styled-components-docs-zh

安装styled-components

npm install --save styled-components
// ts开发的话
npm i --save-dev @types/styled-components

项目中实际使用版本

"styled-components": "^5.3.6"
"@types/styled-components": "^5.1.26",

引入styled-components

import styled from 'styled-components'

简单使用

// 简单使用
const Box = styled.div`
	color: blue;
`;
// 编译后会生成一个唯一的class类名
render(<Box>hello styled-components</Box>);
// less、scss嵌套支持
const Box = styled.div`
	font-size: 12px;
  .banner{
  	background-color:blue;
  }
  span{
  	color: #fff;
    &:active{} // 点击伪类
    &:hover{} // 鼠标移入
    &::after{} // 之后
    &::before{} // 之前
  }
`
render(<Box>
	<div class="banner"></div>
  <span></span>
</Box>)

props/attrs传递

// attrs使用
const MyInput = styled.input.attrs({
	type: 'password',
  placeholder: '请输入密码',
})`
	font-size: 12px;
  outline: none;
  border: 1px solid #ddd;  
`
//props使用
const Box = styled.div`
	background-color: ${props => (props.bg === 'black' ? 'black' : 'red')}
`;
render(<Box bg="myState.bg"></Box>)

样式继承

const Contact = style.div`
	border: 1px solid #ddd;
  border-radius: 5px;
  padding: 15px;
  margin: 15px;
  background: #f3f1f1;
  color: white;
`
const ContactMale = styled(Contact)`
	background: #c4c8f1;
`

给任何组件添加样式

// 下面是给 react-router-dom  Link 组件添加样式的示例
const Link = ({ className, children }) => (
  <a className={className}>
    {children}
  </a>
);
const StyledLink = styled(Link)`
  color: palevioletred;
  font-weight: bold;
`;
render(
  <div>
    <Link>Unstyled, boring Link</Link>
    <br />
    <StyledLink>Styled, exciting Link</StyledLink>
  </div>
);

全局样式createGlobalStyle

注意4的版本后移除了injectGlobal, 现在用createGlobalStyle替换
	新建一个tsx文件写好后注入到项目主文件
import { createGlobalStyle } from 'styled-components';
export const Globalstyle = createGlobalStyle`　
  body{
　　margin: 0;
　　padding: 0;
    background: green;
　}
`;
*/
// app.tsx
import { GlobalStyle } from '@/style.tsx';
function App() {
	return (
  	<div>
    	<Globalstyle/>
    </div>
  )
}

主题切换

// props有点子像
import styled, {ThemeProvider } from 'styled-components';

ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
    // 直接写或者自定义个 const theme = { primary: 'green' };
    <ThemeProvider theme="{{primary: 'green'}}">
    	<App />
    </ThemeProvider>
);
const MyBox = styled.div`
  background-color: ${props => props.theme.primary};
`;

keyframes使用

import styled, { keyframes  } from 'styled-components';
const spin = keyframes`
  from { transform: rotate(0deg); }
  to { transform: rotate(359deg); }
`;
const myButton = styled.div`
  display: inline-block;
  margin: 15px;
  color: white;
  animation: ${spin} 1s linear infinite;
`;

安装VsCode插件

vscode-styled-components