JSX外联样式与CSS在JS中的解决方案

最新推荐文章于 2023-12-14 14:49:58 发布

「已注销」

最新推荐文章于 2023-12-14 14:49:58 发布

阅读量1.1k

点赞数

文章标签： css javascript 前端

本文链接：https://blog.csdn.net/caphpca/article/details/121338210

版权

本文探讨了在JSX中处理外联样式的方法，并介绍了如何在JavaScript中实现CSS解决方案，特别提到了使用styled-components包进行组件样式管理，以提高代码组织和维护的便利性。

摘要由CSDN通过智能技术生成

一、JSX中的外联样式

/
//定义全局外联样式 style.css

body{
    background-color: orange;
}

.box{
    width:100px;
    height:100px;
    background-color: seagreen;
}

//定义组件外联样式 Test.module.css
.item{
    width: 100px;
    height: 100px;
    background-color: red;
}
/

//将全局外联样式导入 index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import Test from './Test';
import './style/style.css';


ReactDOM.render(
  <React.StrictMode>
    <App/>
    <Test/>
  </React.StrictMode>,
  document.getElementById('root')
);

/

//在组件App中使用全局外联样式 

/**
 * 外联样式
 * 一、全局外联样式表，所有组件中可以直接使用
 * 二、组件级别的外联样式，只有某一个组件使用 组件名.module.css
 */

function App() {
  return (
    <div className={'box'}>外联样式</div>
  )
}

export default App


/

//在组件Test中使用组件外联样式

import React from "react";
import Style from "./style/Test.module.css"

function Test(){