css-in-js emotion

最新推荐文章于 2025-02-06 09:15:39 发布

原创最新推荐文章于 2025-02-06 09:15:39 发布 · 252 阅读

0 ·

CC 4.0 BY-SA版权

前端同时被 3 个专栏收录

39 篇文章

订阅专栏

javascript

30 篇文章

订阅专栏

css

4 篇文章

订阅专栏

这篇博客介绍了如何在React应用中使用`react-emotion`和`@emotion/styled`库来创建和应用组件样式。通过示例展示了如何创建styled组件以及如何使用`css`辅助函数定义样式，同时展示了如何将样式应用于子组件。

学习到的两个示例

从写法上看, 侵入性比较小, 直接就是 className:

import styled, { css } from 'react-emotion';

const Container = styled('div')`
  background: #333;
`
const myStyle = css`
  color: rebeccapurple;
`
const app = () => (
<Container>
  <p className={myStyle}>Hello World</p>
</Container>
);


import styled from '@emotion/styled'

let SomeComp = styled.div({
  color: 'hotpink'
})

let AnotherComp = styled.div`
  color: ${props => props.color};
`

render(
  <SomeComp>
    <AnotherComp color="green" />
  </SomeComp>
)