close

Formatavimas ir CSS React – išsamus vadovas

Programoje React galite taikyti formatavimą ir CSS stilius savo programos komponentams. Tai leidžia sukurti vizualiai patrauklias vartotojo sąsajas ir jas pritaikyti pagal pageidavimą. Yra keletas būdų, kaip formatuoti ir taikyti CSS React, įskaitant CSS modulių, Styled komponentų, tiesioginio CSS ir CSS sistemų, pvz. Bootstrap, .

 

Pavyzdžiui, galite naudoti CSS modulius, kad kiekvienam komponentui sukurtumėte atskirus CSS failus. Tai padeda sukurti unikalias CSS klases ir užtikrina komponentų lygio inkapsuliavimą.

// Button.js  
import React from 'react';  
import styles from './Button.module.css';  
  
const Button =() => {  
  return <button className={styles.button}>Click me</button>;  
};  
  
export default Button;

 

Taip pat galite naudoti Styled komponentus, norėdami patogiai ir lanksčiai kurti stilizuotus komponentus.

// Button.js  
import React from 'react';  
import styled from 'styled-components';  
  
const StyledButton = styled.button`  
  background-color: blue;  
  color: white;  
  padding: 10px;  
`;  
  
const Button =() => {  
  return <StyledButton>Click me</StyledButton>;  
};  
  
export default Button;

 

Be to, galite naudoti tiesioginį CSS, kad pritaikytumėte stilius tiesiogiai komponentams.

// Button.js  
import React from 'react';  
  
const Button =() => {  
  const buttonStyles = {  
    backgroundColor: 'blue',  
    color: 'white',  
    padding: '10px',  
  };  
  
  return <button style={buttonStyles}>Click me</button>;  
};  
  
export default Button;

 

Galiausiai, galite naudoti CSS Frameworks, pavyzdžiui, Bootstrap taikyti iš anksto nustatytus stilius savo komponentams.

Formatavimo ir CSS naudojimas React leidžia sukurti vizualiai patrauklias ir patogias sąsajas. Naudodami šiuos metodus galite lengvai pritaikyti savo komponentų išvaizdą ir užtikrinti geresnę vartotojo patirtį.