React Brochure - CSS solution - Moment For Technology

This article mainly records 📝 SCSS + CSS Modules + ANTD style modification problems

And the styled- Components library

Time machine 👾

React Brochure – Get Started JSX ✅ ✅
React Brochure – Set sail ✅ ✅
React Small volume – Hooks ✅ ✅
React Brochure – CSS solution ✅ ✅
React Brochure – Life Cycle ✅ ✅
React Brochure – State Management Redux ✅ ✅
React Volume – State Management Redux middleware ✅ ✅
React Volume – State Management Mobx
React Brochure – Router ✅ ✅
React Volume – Performance optimization
React Booklet – SSR
React Brochure – React Ecology ✅ ✅

scss + css modules

That’s the way I’ve always used it so I’ll write it down here

We can create a new index.module. SCSS for the corresponding component and write the SCSS syntax in it

We can then use these CSS styles as modules within the component

An 🌰

.container {
  background: yellow;
}
Copy the code

import styles from './index.module.scss';

const App = () = > {
  return (
    <div className={styles.container}>
      <h1>Header</h1>
    </div>
  );
};

export default App;
Copy the code

You also need to define the declaration file for index.module. SCSS if TS is used in your project

A new index. The module. SCSS. Which s

export const container: string;
Copy the code

Of course, if you don’t want to manually write a declaration file for every style

You can try typings-for-CSs-modules-loader

This loader automatically generates declaration files for you

Modify the ANTD style

Let’s introduce an ANTD Button

import styles from './index.module.scss';
import { Button } from 'antd';

const App = () = > {
  return (
    <div className={styles.container}>
      <h1>Header</h1>
      <Button>Antd</Button>
    </div>
  );
};

export default App;
Copy the code

Open up the developer debug tool and you can see that

We can see that our container is hashed but the antD style name is not hashed

So we’re going to tell SCSS not to hash when we write the style of ANTD so that the style name will match and the style will work

We can wrap styles that we don’t want to hash with :global

.container {
  color: red;
}

:global {
  .ant-btn {
    width: 300px; }}Copy the code

So the style of ANTD can be modified 😈

styled-components

The basic use

import styled from 'styled-components';

export const Header = styled.div` font-size: 20px; color: red; `;

export const Footer = styled.div` color: yellow; `;
Copy the code

The syntax for wrapping is tag string

Styled. Div These are methods built into third party libraries

With the tag string we can not only call the method but also get each style through some kind of match inside the method

Finally, we can use CSS styles in components just as we would in normal components

import React from 'react';
import { Header, Footer } from './style';
export default function App() {
  return (
    <div>
      <Header>I am a Header</Header>
      <Footer>I am a Footer</Footer>
    </div>
  );
}
Copy the code

Advanced usage

Add the attrs attribute

const HYInput = styled.input.attrs({
  placeholder: "Please fill in your password.",})`
Copy the code

Props to penetrate

Props can be passed to the Styled component

In the component we pass props

<Header color="blue"></Header>
Copy the code

In the Styled component we receive props

const Header = styled.div`
  color: ${(props) => props.color}; } `;
Copy the code

Support for pseudo-classes and pseudo-elements

export const Footer = styled.div` color: yellow; &:hover { color: blue; } &::after {content: 'footer '; } `;
Copy the code

Selector nesting is supported

export const Footer = styled.div` color: yellow; p { color: red; } `;
Copy the code

React Brochure – CSS solution