互联网营销方案策划写作_凡客诚品售后_网络营销心得体会_网页设计与制作学什么

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;