andywer / andywer/react-usestyles

New API

未关闭
#5 3 条评论 0 个 reaction 已指派 0 人 在 GitHub 查看
enhancement
主要语言
JavaScript
星标
86
派生
2
PR 合并指标
30 天内没有已合并 PR

描述

## Proposal for API change

This is a draft for an updated API, based on the experiences made with the current API and its limitations (like #1), the discussions in #2 and other styling hook implementations like [react-jss](https://cssinjs.org/react-jss/?v=v10.0.0-alpha.23#basic).

```jsx
import styleHooks from "@andywer/react-usestyles"

const { useCSS, useStyle, useStyles } = styleHooks()

function MyButton(props) {
const className = useStyle({
background: props.color,
color: "white",
padding: "0.5em 1em"
}, [props.color])
return (

{props.children}

)
}

// or

function MyButton() {
const css = useCSS()
return (

{props.children}

)
}
```

## Benefits

- `styleHooks()` call allows clear static injection order
- `styleHooks()` allows grouping stylesheets by component file, allowing easier optimizations
- `useStyles()` API is now consistent with other React.js hooks
- `useCSS()` as a simple solution to define the styles "inline" in the JSX element
- No need to [wrap dynamic values in functions](https://github.com/andywer/react-usestyles/blob/master/packages/style-hook/README.md#dynamic-styles--themes) anymore

## Details

Can optionally pass a label to `styleHooks()`, like `styleHooks("Button")`, to give the CSS classes readable names in development for a better debugging experience.

Dynamic values would now be allowed to be put in styles directly, without a function as with the old API (`color: () => props.color`). This will prevent us from splitting the dynamic rules from the static ones in a CSS class, but that was mostly done to improve the performance before.

My assumption is that the new API with the initial `styleHooks()` call in each component file will allow better performance anyway and will reduce the impact of that dynamic/static optimization to more or less zero. So let's give it a try and aim for a more convenient API.

## Relation to other styling libs

Should be able delegate the actual styling to one of those well-known and widespread styling libraries:

- Emotion
- JSS
- Styled Components

Static style extraction á la [Linaria](https://github.com/callstack/linaria) is considered out-of-scope. It is a cool project and interesting concept, but we are aiming for a solution that works for the majority of the CSS-in-JS users and without any custom Babel or Webpack setup.

贡献指南

这个仓库没有索引到贡献指南

评估

这个 Issue 还没有评估数据。

把新 issue 发到你的邮箱

精选适合新手参与的 GitHub issue 摘要。