React：styled-components的使用

styled-components的作用：用来在react中编写css样式，css in js

1.安装

yarn add styled-components

2.styled-components基本使用

index.js

import React from 'react';
import ReactDOM from 'react-dom';import App from './styled_component_test/01_styled_components复习';
import { ThemeProvider } from 'styled-components';
ReactDOM.render(// 可以通过theme传值，通过props.theme.corol调用。可以用来定义主题色 <ThemeProvider theme={{ color: 'green' }}><App /></ThemeProvider>,document.getElementById('root')
);

页面：

import React, { PureComponent } from 'react';
import styled from 'styled-components';// 返回的是一个组件
const HomeWarpper = styled.div`// 调用ThemeProvider中传来的数据color: ${(props) => props.theme.color};font-size: 20px;input {// 调用HomeWarpper组件的传来的属性width: ${(props) => props.width};height: 50px;&:focus {outline-color: red;}}
`;// 自定义属性attrs
const HYInput = styled.input.attrs({color: 'yellow',
})`// 调用自定义的props color: ${(props) => props.color};
`;// 定义一个普通的按钮
const Button = styled.button`width: 300px;height: 100px;
`;
// 继承普通的按钮，并加工改造
const PrimaryButton = styled(Button)`background-color: green;
`;
// 继承普通的按钮，并加工改造
const DangerButton = styled(Button)`background-color: red;
`;export default class App extends PureComponent {render() {return ({/* 调用组件 */}{/* 利用组件传数据 */}<HomeWarpper width='200px'><h2>复习styled_components</h2><input type='text' /><HYInput></HYInput><Button>普通btn</Button><PrimaryButton>正式btn</PrimaryButton><DangerButton>危险btn</DangerButton></HomeWarpper>);}
}

React：styled-components的使用相关推荐

我如何使用React，Redux-Saga和Styled Components构建NBA球员资料获取器
by Jonathan Puc 乔纳森·普克(Jonathan Puc) 我如何使用React,Redux-Saga和Styled Components构建NBA球员资料获取器 (How I buil ...
CSS Modules和Styled Components
前言由于 React的JSX语法,能在React中使用样式的方式有很多,本文主要介绍在React中经常使用CSS样式的五种方法: //1行内样式 // 2声明样式 // 3引入样式 // 4 CSS ...
前端大神：如何看待 React Server Components？
作者 | justjavac 责编 | 张文头图 | CSDN 下载自视觉中国来源 | justjavac(ID:justjavac-blog) 昨天看了 demo,今天翻了翻源码.我们应该从几 ...
React Namespaced Components
2019独角兽企业重金招聘Python工程师标准>>> var MyForm = React.createClass({...}); var MyForm.Row = React.c ...
使用 Styled Components 编写样式化组件
本文已整理到 Github,地址
react基础_React基础
react基础 After all my teachings about React, be it online for a larger audience or on-site for compan ...
安装meme_通过构建Meme生成器学习React
安装meme Memes are great - they're such a fun way of describing ideas and opinions. So it's no coincid ...
react 组件样式_如何使用样式化组件为React组件创建视觉变体
react 组件样式 by Gilad Dayagi 通过吉拉德·达亚吉如何使用样式化组件为React组件创建视觉变体 (How to create visual variants for Reac ...
中使用js修改变量值_谈一谈css-in-js在React项目中的使用
一.什么是css-in-js 参考:[css in js 简介] 简单来说,传统的前端方案推崇"关注点分离"原则,HTML.CSS.JavaScript 应该各司其职,进行分离. ...
译文 | Vue 在哪些方面做的比 React 更好？
大家好,我是若川. 在过去的五年中,我一直是一名 React 工程师.我爱React.我喜欢开发 React 应用程序.我认为它是目前最好的UI框架之一. 但是,在这个领域有一些竞争对手.其中最大的是 ...

React：styled-components的使用

1.安装

2.styled-components基本使用

React：styled-components的使用相关推荐

最新文章

热门文章