Hướng dẫn css inline reactjs - css phản ứng nội tuyến

Làm thế nào tôi chèn class CSS cho các component?

Truyền tên của class cho prop là

render() {
  let className = 'menu';
  if (this.props.isActive) {
    className += ' menu-active';
  }
  return <span className={className}>Menuspan>
}

0:

render() {
  return <span className="menu navigation-menu">Menuspan>
}

Thông thường các class CSS phụ thuộc vào các component props hoặc state:

render() {
  let className = 'menu';
  if (this.props.isActive) {
    className += ' menu-active';
  }
  return <span className={className}>Menuspan>
}

Tip

Nếu bạn thường thấy mình viết code như thế , classnames thư viện này sẽ làm đơn giản nó.

Tôi có dùng được inline styles?

Có, xem tài liệu styling tại đây.

Viết inline styles xấu?

Các class CSS thường sẽ có hiệu suất tốt hơn là inline styles.

CSS-in-JS là gì?

“CSS-in-JS” đề cập đến một pattern trong đó CSS ​​được tạo bằng JavaScript thay vì được định nghĩa trong các tệp bên ngoài.

Lưu ý đây không phải là thư viện của React, nhưng được cung câp bởi thư viện thứ ba. React không có ý kiến về cách xác định style; nếu nghi ngờ, bạn có thể định nghĩa style trong một tệp

render() {
  let className = 'menu';
  if (this.props.isActive) {
    className += ' menu-active';
  }
  return <span className={className}>Menuspan>
}

1 riêng và tham chiếu tới chúng sử dụng

render() {
  let className = 'menu';
  if (this.props.isActive) {
    className += ' menu-active';
  }
  return <span className={className}>Menuspan>
}

0.

Tôi có thể dùng animations trong React?

React có thể sử dụng animations rất tốt. Xem ví dụ React Transition Group và React Motion hoặc React Spring.

Có tất cả 4 cách khác nhau để viết style cho các React Components, tùy thuộc vào sở thích cá nhân và độ phức tạp cụ thể của ứng dụng. Ví dụ:

Nếu bạn chỉ muốn thêm vài thuộc tính style cho components/elements thì inline style là lựa chọn tốt nhất.

Khi bạn muốn tái sử dụng các components/elements đã được style trong cùng một file thì style-component là một lựa chọn hoàn hảo.

Khi ứng dụng của bạn phức tạp hơn thì tôi đánh giá cao việc sử dụng CSS Modules hoặc sử dụng CSS stylesheets thông thường.

1. CSS Stylesheet

Đơn giản là các bạn sẽ import file css vào component bằng cách

import './App.css'

nên bạn có thể tách file css ra cho mỗi component.

Tuy nhiên dù bạn chỉ import ở 1 component nhưng css được import sẽ được áp dụng lên toàn bộ ứng dụng.

2. Inline styling

Trong React, inline styles không được viết dưới dạng string (chuỗi) như html thông thường. Thay vào đó nó sẽ được viết dưới dạng Object với key được viết theo kiểu camelCased còn style của value sẽ thường là kiểu string.

Ngoài ra, chúng ta cũng có thể tạo một biến lưu trữ giá trị css rồi truyền nó vào các element như sau:

const styleObject = {backgroundColor: 'white', color: 'red'}

<div style={styleObject}>Hello</div>

hoặc truyền thẳng style vào element:

<div style={{backgroundColor: 'white', color: 'red'}}>Hello</div>

3. CSS Modules

Một CSS Module là một file CSS mà tất cả các tên class và tên hiệu ứng sẽ được bao bọc lại và chỉ có tác dụng trong những file được import. Để có thể dễ hiểu hơn mình xin đưa ra một ví dụ cụ thể hơn về CSS module:

import React from 'react';
import styles from './DashedBox.css';

const DashedBox = () => (
  <div className={styles.container}>
    <p className={styles.content}>Get started with CSS Modules style</p>
  </div>
);

export default DashedBox;

Hơi khác với import css thông thường ta import css bằng cách:

render() {
  let className = 'menu';
  if (this.props.isActive) {
    className += ' menu-active';
  }
  return <span className={className}>Menuspan>
}

3 sau đó ta sử dụng như một object.

Với những bạn nào sử dụng thư viện create-react-app để tạo ứng dụng thì cách viết ở trong file CSS hơi khác biệt một chút, đó là ta phải viết theo cú pháp

render() {
  let className = 'menu';
  if (this.props.isActive) {
    className += ' menu-active';
  }
  return <span className={className}>Menuspan>
}

4. Ví dụ:

//DashedBox.css

:local(.container) {
   margin: 40px;
   border: 5px dashed pink;
 }
 :local(.content) {
   font-size: 15px;
   text-align: center;
 }

Còn với nhưng bạn sử dụng boilerplate khác thì có thể viết css như thường và thêm đoạn loader dưới đây vào file config webpack:

{
  test: /\.css$/,
  loader: 'style!css-loader?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]' 
}

4. Styled-components 💅

Styled-components là một thư viện dành cho React và React Native cho phép bạn viết style ở cấp độ component trong ứng dụng của bạn.

Đầu tiên ta phải cài đặt thư viện styled-components:

npm install styled-components --save

Giờ chúng ta có thể tạo các biến mới bằng cách sử dụng các thẻ html quen thuộc và thêm style cho chúng theo cú pháp:

render() {
  let className = 'menu';
  if (this.props.isActive) {
    className += ' menu-active';
  }
  return <span className={className}>Menuspan>
}

5

Sau đó ta có thể sử dụng biến mới tạo này như các React Component:

render() {
  let className = 'menu';
  if (this.props.isActive) {
    className += ' menu-active';
  }
  return <span className={className}>Menuspan>
}

6

Sau đây là một ví dụ cụ thể hơn:

import React from 'react';
import styled from 'styled-components';

// Tạo một react component