react课程17-Thewildoasis项目起步

全新的项目😼😼😼 本节重点：styled component

一、项目分析（懒得打字版）

✅安装eslint和router见课程十四

二、Styled Components

怎么prettier需要自己配置文件了呀，不然就不能用，解决了半天，栓Q……

要先在根目录创建一个.prettierrc并提供基本配置:{ “singleQuote”: true, “trailingComma”: “es5” }

⭕ npm i styled-components

⭕安装vscode-styled-components拓展使得css代码高亮

⭕https://styled-components.com/

（1）基本用法

const Main = styled.main`
  background-color: var(--color-grey-200);
  padding: 4rem 4.8rem 6.4rem;
`;

（2）属性

1、**as 属性**：

• as 属性允许你更改组件的根元素。例如，如果你有一个 styled.button，你可以使用 as="a" 将其渲染为一个链接，而不是按钮。
• as 可以动态地根据需要更改渲染的 HTML 元素，非常灵活。

const StyledButton = styled.button`
  background-color: blue;
  color: white;
`;

// 使用 as 属性
<StyledButton as="a" href="/home">Go Home</StyledButton>

2、**type 属性**：

• type 属性通常用于原生 HTML 元素（如 <input> 或 <button>），指定元素的类型。例如，按钮的类型可以是 button、submit 或 reset。
• type 属性是一个 HTML 属性，并不涉及 styled-components 的样式处理。

<StyledButton type="submit">Submit</StyledButton>

3、role属性

role 是一个标准的 HTML 属性，用于指定元素的角色，通常与无障碍访问（Accessibility，简称 a11y）相关。它告诉屏幕阅读器等辅助技术，这个元素应该如何被解读或交互。

使用场景：

1. 使用 as 可以在同一个 styled 组件上进行多种表现形式的渲染，增加了组件的复用性。
2. type 用于控制元素的行为，通常在表单相关组件中使用。

总的来说，as 提供了更大的灵活性和复用性，而 type 则是与元素行为相关的标准 HTML 属性。选择使用 as 而不是 type 主要是因为它与 styled-components 的设计理念相契合，允许更好地控制组件的呈现形式。

（3）默认props

Row.defaultProps = {
  type: 'vertical',
};

（4）装饰第三方包内组件

const StyledNavLink = styled(NavLink)

使用括号链接第三方包内组件

（5）数组props

import styled, { css } from 'styled-components';

const sizes = {
  small: css`
    font-size: 1.2rem;
    padding: 0.4rem 0.8rem;
    text-transform: uppercase;
    font-weight: 600;
    text-align: center;
  `,
  medium: css`
    font-size: 1.4rem;
    padding: 1.2rem 1.6rem;
    font-weight: 500;
  `,
  large: css`
    font-size: 1.6rem;
    padding: 1.2rem 2.4rem;
    font-weight: 500;
  `,
};

const variations = {
  primary: css`
    color: var(--color-brand-50);
    background-color: var(--color-brand-600);

    &:hover {
      background-color: var(--color-brand-700);
    }
  `,
  secondary: css`
    color: var(--color-grey-600);
    background: var(--color-grey-0);
    border: 1px solid var(--color-grey-200);

    &:hover {
      background-color: var(--color-grey-50);
    }
  `,
  danger: css`
    color: var(--color-red-100);
    background-color: var(--color-red-700);

    &:hover {
      background-color: var(--color-red-800);
    }
  `,
};

const Button = styled.button`
  border: none;
  border-radius: var(--border-radius-sm);
  box-shadow: var(--shadow-sm);

  ${(props) => sizes[props.size]}
  ${(props) => variations[props.variation]}
`;

Button.defaultProps = {
  variation: 'primary',
  size: 'medium',
};

export default Button;

三、零碎

（1）

⭕npm i react-icons 图标集： https://react-icons.github.io/react-icons/

（2）

<Route element={<AppLayout />}>
    <Route index element={<Navigate replace to="dashboard" />} />
</Route>

将layout组件包裹住其他的Route，使用组件承接其他组件内容

index关键字认证主页面，replace关键字替代历史url

（3）styled component的其他重要属性

1、**ref 属性**：

• ref 属性允许你访问组件的 DOM 节点或 class 实例，用于直接操作 DOM，常见于需要获取元素引用的场景，例如焦点管理、动画、滚动等。

2、**key 属性**：

• key 是 React 用来标识哪些元素被修改、添加或移除的特殊属性，尤其在渲染列表时非常重要。styled-components 内的组件同样遵循这个规则。

3、**className 属性**：

• className 属性允许你给 styled-component 组件添加额外的 class 名，这对于在一个组件中应用多个样式规则或与外部 CSS 集成时特别有用。

4、**style 属性**：

• style 属性是内联样式，可以直接在组件上设置行内样式，用于一些动态样式的设置，但不建议与 styled-components 的样式系统大量混用。

5、**style 属性**：

• style 属性是内联样式，可以直接在组件上设置行内样式，用于一些动态样式的设置，但不建议与 styled-components 的样式系统大量混用。

6、children、onClick、defaultvalue等