React学习: styled-components

常用用法，记录

常用的 color 方法

• 记得配置成App内全局 rgba/lighten/darken

npm i @jswork/color-rgba 
npm i @jswork/color-lighten 
npm i @jswork/color-darken

export const LoginFooter = styled.footer`
  font-size: 14px;
  color: ${rgba('#fff', 0.8)};
  position: absolute;
  bottom: 24px;
  width: 100%;
  text-align: center;
`;

each 等循环

import styled from 'styled-components';

export const STATUS_COLORS = [
  { label: 'Relative', status: 'relative', color: ['#03DCA4', '#D6D6D6'] },
  { label: 'Neutral', status: 'neutral', color: ['#F9F9F9', '#D6D6D6'] },
  { label: 'Positive', status: 'positive', color: ['#FF8886', '#D6D6D6'] },
  { label: 'Important', status: 'important', color: ['#FFCE00', '#FFFFFF'] },
  { label: 'Domain', status: 'domain', color: ['#1890FF3D', '#1890FF3D'] },
];

const Container = styled.div`
  ${STATUS_COLORS.map(
    (item) =>
      `&[data-status='${item.status}'] { > i { background: ${item.color[0]}; border-color: ${item.color[1]}; }`
  )}
`;

export default (props) => {
  return <Container>Legend</Container>;
};

默认属性

const StyledContainer = styled.section.attrs((props) => ({
  width: props.width || "100%",
  hasPadding: props.hasPadding || false,
}))`
  --container-padding: 20px;
  width: ${(props) => props.width}; // Falls back to 100%
  padding: ${(props) =>
    (props.hasPadding && "var(--container-padding)") || "none"};
`;

实现extend(其实是换个写法)

// 原来的
const StyledContainer = styled.section`
  max-width: 1024px;
  padding: 0 20px;
  margin: 0 auto;
`;

const StyledSmallContainer = styled.section`
  max-width: 1024px;
  padding: 0 10px;
  margin: 0 auto;
`;

const StyledContainer = styled.section`
  max-width: 1024px;
  padding: 0 20px;
  margin: 0 auto;
`;

// Inherit StyledContainer in StyledSmallConatiner
const StyledSmallContainer = styled(StyledContainer)`
  padding: 0 10px;
`;

全局 Style

• 使用 createGlobalStyle
• 看这个组件: GlobalStyle

import React from 'react';
import { createGlobalStyle } from 'styled-components';
import Router from '@/views/Router';
import AppProvider from '@/providers';

const GlobalStyle = createGlobalStyle`
  #app {
    width: 100%;
    height: 100%;
  }
`;

function App() {
  return (
    <React.StrictMode>
      <AppProvider>
        <Router />
      </AppProvider>
      <GlobalStyle />
    </React.StrictMode>
  );
}

export default App;

调试

让 styled-component 定义的组件，在开发的时候，有名称出现。

• https://github.com/styled-components/babel-plugin-styled-components
• https://styled-components.com/docs/tooling#babel-plugin

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import svgr from 'vite-plugin-svgr';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    react({
      babel: {
        plugins: [
          [
            'babel-plugin-styled-components',
            {
              displayName: true,
              fileName: false,
            },
          ],
        ],
      },
    }),
    svgr(),
  ],
  resolve: {
    alias: {
      '@': '/src',
    },
  },
});

参考

• https://www.smashingmagazine.com/2020/07/styled-components-react/
• https://stackoverflow.com/questions/52696511/for-loops-in-styled-components
• https://styled-components.com/docs/basics
• https://github.com/afeiship/color-packages
• https://github.com/styled-components/babel-plugin-styled-components/issues/350