import { styled, ClassNames } from '@compiled/react';

// Tie styles to an element
<div css={{ color: 'purple' }} />

// Create a component that ties styles to an element
const StyledButton = styled.button`
  color: ${(props) => props.color};
`;

// Use a component where styles are not necessarily tied to an element
<ClassNames>
  {({ css }) => children({ className: css({ fontSize: 12 }) })}
</ClassNames>

Extract styles

Turn on extraction and all components styled in your app and sourced through NPM will have their runtime stripped and styles extracted to an atomic style sheet.

-import { CC, CS } from '@compiled/react/runtime';
-
-const _2 = '._syaz1q9v{color: hotpink}';
-const _ = '._1wybfyhu{font-size: 48px}';
-
export const LargeHotPinkText = () => (
-  <CC>
-   <CS>{[_, _2]}</CS>
    <span className="_syaz1q9v _1wybfyhu">Hello world</span>
-  </CC>
);

._1wybfyhu {
  font-size: 48px;
}
._syaz1q9v {
  color: hotpink;
}

See CSS extraction for more information.

Installation

Install the React package.

npm install @compiled/react

Then configure your bundler of choice or use Babel directly.

Webpack

Install the Webpack loader.

npm install @compiled/webpack-loader --save-dev

See installation for more information.

Parcel

Note
Parcel v2 is currently in pre-release which makes this transformer experimental, it may break when updating Parcel. Use with caution.

Install the Parcel v2 transformer.

npm install @compiled/parcel-transformer --save-dev

See installation for more information.

Babel

Install the Babel plugin.

npm install @compiled/babel-plugin --save-dev

See installation for more information.

Contributions

Contributions are welcomed!Please see CONTRIBUTING.md to get started.

Thanks

Thanks to Chromatic for providing the visual testing platform that helps us review UI changes and catch visual regressions.

使用案例

理解LINQ预编译查询(Compiled LINQ)

从上一篇NHibernate与Entity Framework性能比较中可以看出来LINQ预编译查询可以大大提高性能。本文对预编译查询做简单介绍。首先了解什么是匿名方法(anonymous function)和Func<> 1. 命名方法，匿名方法和Lambda表达式在C#2.0之前，对委托赋值的唯一方式是通过的命名方法。C#2.0引入匿名方法以内联(in-line)方式使之变得直观
UE4新建C++工程时出现Could not be compiled的错误。

https://answers.unrealengine.com/questions/565268/could-not-be-compiled-try-rebuilding-from-source-m-3.html 我已经安装了vs2015，怀疑安装的时候少安装了Common Tool，于是重新打开vs2015安装程序，“修改”功能，把Common Tool添加进去就可以了。
cpu部署chatglm 报错No compiled kernel found.

No compiled kernel found. Compiling kernels : C:\Users\admin.cache\huggingface\modules\transformers_modules\local\quantization_kernels_parallel.c Compiling gcc -O3 -fPIC -pthread -fopenmp -std=c99 C:\
Torch not compiled with CUDA enabled 解决办法

## 目标解决Torch not compiled with CUDA enabled 版本不兼容问题 ### 原理 Torch not compiled with CUDA enabled，即CUDA、torch的版本兼容问题是造成print(torch.cuda.is_available()) 返回false的一种原因。本文搜集从卸载CUDA、torch，选择兼容版本，再到使用清华源，最后安
AssertionError:torch not compiled with cuda enabled

anaconda里除了有python包之外（我们下载python可不就下载的这个包吗），还集成了很多数据分析用的包，不用我们再一一安装了。如果在path里配置了anaconda的环境变量，anaconda prompt 和 cmd并无太大差别，只不过anaconda prompt更方便，更好用，有很多快捷键。 anaconda创建环境，激活，就可以在这个环境中下载需要的包的版本，即使与别的环境的
RuntimeError: Not compiled with GPU support

这个错误消息的意思是：运行时错误：没有使用 GPU 支持编译。它表示你正在尝试使用 GPU 运行代码，但是代码并未使用 GPU 编译。这可能是因为代码的开发者没有为 GPU 编译代码，或者你的计算机中没有安装 GPU 驱动程序。要解决这个问题，你需要确保代码已经为 GPU 编译，或者在没有 GPU 的情况下运行代码。如果你的计算机中安装了 GPU，请确保 GPU 驱动程序已经安装并且正常工作。
成功解决raise AssertionError(“Torch not compiled with CUDA enabled“)AssertionError: Torch not compiled

成功解决raise AssertionError("Torch not compiled with CUDA enabled") AssertionError: Torch not compiled with CUDA enabled 目录解决问题解决思路解决方法 T1、尝试修改为GPU

compiled

Compiled

Usage

Extract styles

Installation

Webpack

Parcel

Babel

Contributions

Thanks

同类工具

相关阅读

相关文章

相关问答

相关文档