今天准备来给大家分享分享 React 中 styled-components 的基础使用, 仅仅是我个人的一些理解, 不一定全对, 有错误还请大佬们指出, 496838236 这是我 qq, 有想指点我的大佬随时加我 qq 好吧, 要是想约我一起做保健, 那我只能随叫随到了
好了, 废话不多说, 开工
今天我们不对 react 的环境进行搭建, 我直接用脚手架搭一个最简单的环境来用, 进入主题
1. 使用 styled-components
首先我们要安装 styled-components
yarn add styled-components || NPM install --save styled-components
2. 最基础的使用,(为了方便阅读, 以下所有的代码我将在一个文件中演示)
- import React, { Component,Fragment} from 'react';
- // 引入 styled-components
- import styled from 'styled-components'
- // 修改了 div 的样式
- const Title = styled.div`
- font-size:1.5rem;
- color:red
- `
- // 修改了 button 的样式
- const Button = styled.button`
- border:none;
- background-color:blue
- `
- class App extends Component {
- render() {
- return (
- <Fragment>
- {
- // 开始的内容
- /* <div > 大红牛 </div>
- <button > 枸杞 11</button> */}
- <Title > 大红牛 </Title>
- <Button > 枸杞 </Button>
- </Fragment>
- )
- }
- }
- export default App;
运行结果:
是不是很爽, 其实到这里完全就可以用 styled-components 来写类似于 CSS 的代码了, 但是这肯定不够啊, 所以我们继续往下看
2. 塑造组件
为什么要有塑造塑件呢, 因为肯定会有一个场景, 我们要对已经定义好的组件进行二次样式的修改, 那这个时候我们就需要用塑造组件了
- import React, { Component,Fragment} from 'react';
- // 引入 styled-components
- import styled from 'styled-components'
- // 初始组件
- const Button = styled.button`
- color: palevioletred;
- font-size: 1em;
- margin: 1em;
- padding: 0.25em 1em;
- border: 2px solid palevioletred;
- border-radius: 3px;
- `
- // 对组件进行二次样式修饰
- const YellowButton = styled(Button)`
- background-color:yellow
- `
- class App extends Component {
- render() {
- return (
- <Fragment>
- <Button > 红牛 </Button>
- <YellowButton > 枸杞 </YellowButton>
- </Fragment>
- )
- }
- }
- export default App;
运行结果:
3.props 传递参数 styled-components 可以用 props 接受参数, 从而根据传递的参数确定样式, 是不是很强大
- import React, { Component,Fragment} from 'react';
- // 引入 styled-components
- import styled from 'styled-components'
- //props 传递参数 (根据参数的值设置样式)
- // 有传递值字体会变为红色
- // 无传递值会默认取蓝色
- const Button = styled.button`
- padding: 0.5em;
- margin: 0.5em;
- color: ${ props => props.inputColor || "blue" };
- background: papayawhip;
- border: none;
- border-radius: 3px;
- `
- class App extends Component {
- render() {
- return (
- <Fragment>
- <Button inputColor="red"> 红牛啊 </Button>
- </Fragment>
- )
- }
- }
- export default App;
运行结果:
除了可以根据参数的值进行样式的设置之外, 我们还可以通过参数的有无来设置样式:
- import React, { Component,Fragment} from 'react';
- // 引入 styled-components
- import styled from 'styled-components'
- //props 传递参数 (根据参数的有无设置样式)
- // 有参数背景会变为蓝色
- // 无传递值背景会默认取黄色
- const Button = styled.button`
- padding: 0.5em;
- margin: 0.5em;
- background: ${props=>props.blue?"blue":"yellow"};
- border: none;
- border-radius: 3px;
- `
- class App extends Component {
- render() {
- return (
- <Fragment>
- <Button blue > 红牛啊 </Button>
- </Fragment>
- )
- }
- }
- export default App;
运行结果:
4. 修改样式的同时添加属性, 同时也可以通过这种方法引入第三方的样式, 只需要设置 className 属性即可
- import React, { Component,Fragment} from 'react';
- // 引入 styled-components
- import styled from 'styled-components'
- //props 传递参数 (根据参数的有无设置样式)
- // 有参数背景会变为蓝色
- // 无传递值背景会默认取黄色
- const Button = styled.button.attrs({
- title:"aaa",
- id:'bbb',
- 'data-role':(props)=>props.hello
- })`
- padding: 0.5em;
- margin: 0.5em;
- border: none;
- border-radius: 3px;
- `
- class App extends Component {
- render() {
- return (
- <Fragment>
- <Button hello="hi"> 红牛啊 </Button>
- </Fragment>
- )
- }
- }
- export default App;
运行结果:
通过控制台我们可以看到, 属性已经全部被加上去了
5. 继承
- import React, { Component,Fragment} from 'react';
- // 引入 styled-components
- import styled from 'styled-components'
- // 继承 根据实验 如果我没出错 最新的版本应该是不支持 extend 了
- const Button = styled.button`
- color: palevioletred;
- font-size: 1em;
- margin: 1em;
- padding: 0.25em 1em;
- border-radius: 3px; `
- const YellowButton = Button.extend`
- color: yellow;
- border-color: yellow; `;
- class App extends Component {
- render() {
- return (
- <Fragment>
- <Button > 红牛啊 </Button>
- <YellowButton > 枸杞啊 </YellowButton>
- </Fragment>
- )
- }
- }
- export default App;
6. 偷懒的写法, 当标签很多时, 要是我们虽每个标签都要进行修饰, 那岂不是要写好多的组件, 但是在有些情况下我们没必要分这木多组件, 那我们不妨可以试试以下的写法
- import React, { Component,Fragment} from 'react';
- // 引入 styled-components
- import styled from 'styled-components'
- // 另一种语法
- const StyledDiv = styled.div`
- font-size: 100px;
- > span {
- font-size: 50px;
- }
- &> p {
- font-size: 25px;
- }
- `
- class App extends Component {
- render() {
- return (
- <Fragment>
- <StyledDiv>
- <span > 红牛 </span>
- <p > 枸杞 </p>
- </StyledDiv>
- </Fragment>
- )
- }
- }
- export default App;
运行结果:
好啦, 好啦今天就先到这里吧, 希望各位大佬能指教指教我, 实在不想指教一起约个正规保健也是可以的好吧
来源: https://www.cnblogs.com/suihang/p/9971890.html