返回 登录
10

带你了解CSS in JS

React的出现,打破了”关注点分离”网页开发原则。因其采用组件结构,便强制要求把 HTML、CSS、JavaScript 写在一起(可见下面案例)。更准确地说,是用JavaScript写HTML和CSS。

const style = {
  'color': 'red',
  'fontSize': '46px'
};

const clickHandler = () => alert('hi'); 

ReactDOM.render(
  <h1 style={style} onclick={clickHandler}>
     Hello, world!
  </h1>,
  document.getElementById('example')
);

React 在 JavaScript 里面实现了对 HTML 和 CSS 的封装,对 HTML 的封装是 JSX 语言 。而由于CSS的封装非常弱,导致了一系列的第三方库,用来加强 React 的 CSS 操作,它们统称为 CSS in JS。

本文将通过一个新的 CSS in JS 库polished.js来充分展示使用 JavaScript 语言写 CSS 的优势。

阅读全文:CSS in JS 简介

了解更多前沿技术资讯,获取深度技术文章推荐,请关注CSDN研发频道微博

评论