广州网页设计学校有哪些_北京网站建设公司兴田德润实惠_在线工具_百度搜索词排名

1.有两种类名方法

import React from 'react';
import styles from './index.less';
const Home: React.FC = () => {return (<div><h1 className='main'>Welcome to the Home Page</h1><p  className={styles.list}>This is a simple home page.</p></div>);
};export default Home;

2.同时使用时会报错

3.解决方法 

3.1字符串拼接（基础方式）​

import React from 'react';
import styles from './index.less';
const Home: React.FC = () => {return (<div><h1 className={`${styles.list} main`} >Welcome to the Home Page</h1><p className={styles.list}>This is a simple home page.</p></div>);
};export default Home;

3.2classnames 库（推荐方案）​

npm install classnames @types/classnames

import React from 'react';
import styles from './index.less';
import classnames from 'classnames';
const Home: React.FC = () => {return (<div><h1 className={classnames(styles.list,'main')} >Welcome to the Home Page</h1><p className={styles.list}>This is a simple home page.</p></div>);
};export default Home;