Filbert
made with React

Filbert

这是一个轻量级的Css-In-Js框架。

相关问答
暂无相关问题
查看全部
简介及使用教程

Filbert是一个轻量级的Css-In-Js框架,仅~1KB大小,是styled-components或emotion的替代方案,有着相似的API接口。

image.png

支持的特性:

  • CSS ✅
  • Nested Selectors ✅
  • Dynamic Styling(Prop based) ✅
  • Override Component Style ✅
  • Global ✅
  • Pseudo Selector ✅
  • Media Queries ✅
  • Keyframe ✅
  • Theming ✅
  • Component Selector ✅
  • Styles As Object Literals 🔜
  • Server-side Rendering ✅
  • Client-side Hydration ✅
  • Vendor Prefixing ✅
  • Extract CSS File ✅
  • React Native 🔜
  • Integration(Gatsby) ✅
  • Integration(Next.js) ✅

安装

Npm

npm i @filbert-js/core

Yarn

yarn add @filbert-js/core

使用

引入

import { styled, Global, keyframes } from '@filbert-js/core';

styled组件

image.png

const Button = styled('button')`
  background: pink;
  border: solid 1px grey;
`;
render(<Button>This is a Button component.</Button>);

CSS

image.png

import React from 'react';
import { css, jsx } from '@filbert-js/core';
const styles = css`
  background: pink;
  border: solid 1px grey;
`;
render(<button css={styles}>This is a Button component.</button>);

嵌套选择器

image.png

import React from 'react';
import { styled } from '@filbert-js/core';
const Paragraph = styled('p')`
  color: grey;
  button {
    margin: 0 1rem;
    background: #1f368f;
    color: white;
  }
`;
render(
  <Paragraph>
    I'm grey!!
    <button>A button</button>
  </Paragraph>,
);

示例

作者

kuldeepkeshwar

@kuldeepkeshwar

相关项目

这是一个用于使用React构建可访问的富Web应用程序的工具包。
这是一个使用Material-UI的文件上传Dropzone组件。
这是一个基于React.js的时间差显示组件。
这是一个开源的javascript文件上传器。
这是一个基于开源Material风格的组件库。
这是一个React组件库。
这是一个可定制和复用的React Native组件库。