React 应用较为广泛,那么 CSS 在 React 中如何使用呢?
一、行内样式使用
import React from 'react'
class Home extends React.Component {
render() {
return (
<div>
<h3 style={{fontColor: 'green',marginTop:'5px'}}>标题</h3>
</div>) }
}
export default Home
二、声明样式使用
import React from 'react'
class Home extends React.Component {
render() {
const title = {
fontColor: 'green',
marginTop: '5px'
}
return (
<div>
<h3 style={tilte}>标题</h3>
</div>) }
}
export default Home
三、外部引入
import React from 'react';
import './Home.css';
class Home extends React.Component {
render() {
return (
<div>
<h3 className="title">标题</h3>
</div>) }
}
export default Home
四、Style Component
npm install --save styled-components
import React from 'react';
class Home extends React.Component {
const Title = styled.h3`
margin-top: 5px;
font-color: green;
`;
render() {
return (
<div>
<Title>标题</Title>
</div>) }
}
export default Home
六、Radium
import React from "react";
import Radium from 'radium';
let styles = {
title: {
color: 'green',
marginTop: '5px'
':hover': {
fontColor: '16px'
}
},
info: {
color: '#666'
}
};
class Home extends Component {
render() {
return (
<div>
<h3 style={[ styles.title, styles.info ]}>
标题
</h3>
</div>
);
}
}
export default Radium(Home);
以上就是小编为您带来的关于 React中的css使用方式 的全部内容。
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。