介绍迷人的

我正在PayPal为我的产品构建一些东西（博客文章可能即将发布） 并且厌倦了编写这样的组件：

const styles = glamor.css({
	fontSize: 20,
	textAlign: 'center',
})
function MyStyledDiv({ className = '', ...rest }) {
	return <div className={`${styles} ${className}`} {...rest} />
}

所以我决定尝试风格化的组件，因为炒作的火车很强大🚂。我真的很喜欢它：

X 帖子数据不可用：https://twitter.com/kentcdodds/status/840329548885557250

它允许我像这样编写相同的组件：

const MyStyledDiv = styled.div`
	font-size: 20px;
	text-align: center;
`

制作带有其样式的可组合组件只是 超级棒。

不幸的是，当我意识到目前没有 从右到左转换的解决方案（如 CSSJanus 或 rtl-css-js），这很难 对我正在构建的内容的要求。我对 当时的样式化组件（请注意，您可以转译掉很多 如果你愿意放弃一些动态能力，那么大小， 我不愿意这样做）。

因此，在评估了一堆其他解决方案并尝试增强现有解决方案之后 为了成为我想要的解决方案，我决定创建自己的解决方案。

进入迷人💄！

PayPal/魅力四射

glamorous是用优雅的 React 组件样式解决的 （灵感）API，小型 占地面积（gzipped）和出色的性能（通过glamor）。它有一个非常相似的 API 对组件进行样式化，并在引擎盖下使用类似的工具 （魅力）。好处是：<5kb

X 帖子数据不可用：https://twitter.com/kentcdodds/status/842881773180731392

让我们快速看一下迷人的组件是什么样子的：

// Create a <Title> react component that renders an <h1> which is
// centered, palevioletred and sized at 1.5em
const Title = glamorous.h1({
	fontSize: '1.5em',
	textAlign: 'center',
	color: 'palevioletred',
})

// Create a <Wrapper> react component that renders a <section> with
// some padding and a papayawhip background
const Wrapper = glamorous.section({
	padding: '4em',
	background: 'papayawhip',
})

function App() {
	return (
		<Wrapper>
			<Title>Hello World, this is my first glamorous component!</Title>
		</Wrapper>
	)
}

（感谢 styled-components 的示例灵感）。

魅力之美在于，你可以用魅力做所有很酷的事情，你可以用魅力来做。 以下是一些示例：

伪类

const MyLink = glamorous.a({
	':hover': {
		color: 'red',
	},
})

儿童选择器（您应该很少使用的逃生舱口，但很高兴拥有）

const MyDiv = glamorous.div({
	display: 'block',
	'& .bold': { fontWeight: 'bold' },
	'& .one': { color: 'blue' },
	':hover .two': { color: 'red' },
})

const ui = (
	<MyDiv>
		<div className="one bold">is blue-bold!</div>
		<div className="two">hover red!</div>
	</MyDiv>
)

媒体查询

const MyResponsiveDiv = glamorous.div({
	width: '100%',
	padding: 20,
	'[@media](http://twitter.com/media "Twitter profile for @media")(min-width: 400px)':
		{
			width: '85%',
			padding: 0,
		},
})

动画

import { css } from 'glamor' // or require or whatever...

const bounce = css.keyframes({
	'0%': { transform: 'scale(1)', opacity: 0.3 },
	'55%': { transform: 'scale(1.2)', opacity: 1 },
	'100%': { transform: 'scale(1)', opacity: 0.3 },
})

const MyBouncyDiv = glamorous.div({
	animation: `${bounce} 1s infinite`,
	width: 50,
	height: 50,
	backgroundColor: 'red',
})

主题

有了新的（最近由亚历山德罗·阿诺多（Alessandro Arnodo）添加），迷人也支持 主题：ThemeProvider

const Title = glamorous.h1(
	{
		fontSize: '10px',
	},
	(props, theme) => ({
		color: theme.main.color,
	}),
)

// use <ThemeProvider> to pass theme down the tree
const ui1 = (
	<ThemeProvider theme={theme}>
		<Title>Hello!</Title>
	</ThemeProvider>
)

// it is possible to nest themes
// inner themes will be merged with outers
const ui2 = (
	<ThemeProvider theme={theme}>
		<div>
			<Title>Hello!</Title>
			<ThemeProvider theme={secondaryTheme}>
				{/\* this will be blue */}
				<Title>Hello from here!</Title>
			</ThemeProvider>
		</div>
	</ThemeProvider>
)

如果你需要全局样式，你可以直接使用魅力来做到这一点（你也可以用样式组件来做到这一点）。还有很多 你可以用魅力做其他很酷的事情（包括服务器端渲染）！

另一个很棒的功能是它将合并魅力类名称 自动为您在一起。在此处了解更多信息。glamorous

---

除了受 styled-components 启发的 API 之外，还公开了一个受 jsxstyle 启发的 API。有时，你不会 想给某物起个名字，因为给事物命名很难。尤其是 这些东西，你最终会得到像和谁知道的名字 哪个是哪个！？所以，如果你发现某些东西真的不需要名字，那么 不要给它一个！glamorousContainerWrapper

const { Div, A } = glamorous

function App() {
	return (
		<Div textAlign="center" color="red">
			<A
				href="[https://brave.com/](https://brave.com)"
				textDecoration="none"
				color="darkorange"
				textShadow="1px 1px 2px orange"
			>
				Browse faster and safer with Brave.
			</A>
			<div>It's fast, fun, and safe!</div>
		</Div>
	)
}

（有趣的提示：这也有效：<迷人。Div>JSX！！</迷人。分区>）

哦，只是为了好玩，所有这些围绕 CSS Grid 的兴奋让你垂涎三尺？ 它得到了迷人的微不足道的支持：

// Example inspired by
// [http://gridbyexample.com/examples/example12/](http://gridbyexample.com/examples/example12)
const MyGrid = glamorous.div({
	margin: 'auto',
	backgroundColor: '#fff',
	color: '#444',
	// You can use [@supports](http://twitter.com/supports "Twitter profile for @supports") with glamor!
	// So you can use [@supports](http://twitter.com/supports "Twitter profile for @supports") with glamorous as well!
	'[@supports](http://twitter.com/supports "Twitter profile for @supports") (display: grid)':
		{
			display: 'grid',
			gridGap: 10,
			gridTemplateAreas: `  
      "....... header header"  
      "sidebar content content"  
      "footer  footer  footer"  
    `,
		},
})

const Box = glamorous.div({
	backgroundColor: '#444',
	color: '#fff',
	borderRadius: 5,
	padding: 10,
	fontSize: '150%',
})

const HeaderFooter = glamorous(Box)({
	backgroundColor: '#999',
})

function App() {
	return (
		<MyGrid>
			<HeaderFooter css={{ gridArea: 'header' }}>Header</HeaderFooter>
			<Box css={{ gridArea: 'sidebar' }}>Sidebar</Box>
			<Box css={{ gridArea: 'content' }}>
				Content
				<br />
				More content than we had before so this column is now quite tall.
			</Box>
			<HeaderFooter css={{ gridArea: 'footer' }}>Footer</HeaderFooter>
		</MyGrid>
	)
}

您将获得：

受 http://gridbyexample.com/examples/example12/ 启发的例子