@ digital-ai/ dot- 组件
欢迎
所以你决定用 dot-components 在你的应用中,这是惊人的。 一定要来 说"你好" #点- 组件 在Slack的频道 告诉我们你是如何使用我们的图书馆.
安装
# with npm
npm install @digital-ai/dot-components
# with yarn
yarn add @digital-ai/dot-components
主题提供者
这个 DotThemeProvider 为此库中的组件提供主题。 当您使用此库时, 您需要将您的应用程序包成这样 :
<DotThemeProvider>
<App />
</DotThemeProvider>
一旦您的申请被包裹 DotThemeProvider,您的样式组件可以使用主题的颜色和间隔 :
import styled, { css } from 'styled-components';
const StyledWidget = styled.div`
${({ theme }) => css`
background-color: ${theme.palette.secondary[300]};
border: 1px solid ${theme.palette.primary.main};
.my-widget-text {
margin-left: ${theme.spacing(2)};
}
`}
`;
export interface MyWidgetProps {
text: string;
}
export const MyWidget = ({ text }: MyWidgetProps) => {
return (
<StyledWidget>
<div className="my-widget-text">{text}</div>
</StyledWidget>
);
};
说明: 如果您想要创建自定义主题, 您可以遵循 这些方向。 。 。 .
配置游戏
我们正在利用 @digital-ai/dot-icons 用于 @font-face。如果您正在使用 Jest,那么您需要更新以下文件 。 文件的位置可能因应用程序的结构而异
jest.config.js
moduleNameMapper: {
'@digital-ai/dot-icons': '<rootDir>/testing-utils/style-mock.ts',
'@digital-ai/dot-illustrations': '<rootDir>/testing-utils/style-mock.ts',
}
style-mock.ts
module.exports = {};
锁定 CSS 类名称
CSS类名称有三种不同的类型被使用: dot- 课, Mui 课程,以及 styled-components 课程。 鼓励您使用 dot- 应用样式中的类,但也可以使用 Mui 上课,如果你喜欢。 必须指出 Mui 类别会发生变化,而且不能保证在各种释放中保持稳定.
说明: 这个 styled-components 类由库生成,不应被使用,它们看起来像是随机字母,例如: kMprfx
解决样式冲突
现有的应用程序样式可能以与来自 dot-components。 。 。 .
因为 dot- 类适用于属于下列组成部分的本地要素: dot-components,这些冲突可以通过对应用程序样式作小的修改来解决.
例如,假设应用程序包括这样的全球样式:
input {
background-color: red;
}
要覆盖此样式 dot-components,可改为:
input:not(.dot-input) {
background-color: red;
}
更新
当你准备好拉 在最新版本的 dot-components 软件包运行以下命令.
# with npm
npm update @digital-ai/dot-components@latest
# with yarn
yarn upgrade @digital-ai/dot-components@latest
字体图标
查找您想要使用的图标 .点设计系统
遵循代码示例 在此显示
注:如果知道图标的名称,可以使用右上角的搜索来搜索.
如果你正在使用这个 DotIcon 组件,则不需要在 icon- 图标名称的前缀.
捐款
代码样式指南
更改日志
了解最新的改进。 。 。 .