Thực hành tốt nhất theo kiểu nội tuyến React.js

Tôi biết rằng bạn có thể chỉ định các kiểu trong các lớp React, như thế này:

var MyDiv = React.createClass({
  render: function() {
    var style = {
      color: 'white',
      fontSize: 200
    };

    return <div style={style}> Have a good and productive day! </div>;
  }
});

Tôi có nên nhắm đến việc thực hiện tất cả các kiểu dáng theo cách này và không có kiểu nào được chỉ định trong tệp CSS của tôi không?

Hoặc tôi nên tránh hoàn toàn phong cách nội tuyến?

Có vẻ kỳ quặc và lộn xộn khi thực hiện một chút của cả hai - hai vị trí sẽ cần được kiểm tra khi điều chỉnh kiểu dáng.

Vẫn chưa có nhiều "Thực tiễn tốt nhất". Những người trong chúng ta đang sử dụng kiểu nội tuyến, cho các thành phần React, vẫn còn rất nhiều thử nghiệm.

Có một số cách tiếp cận khác nhau: Biểu đồ so sánh lib kiểu nội tuyến

Tất cả hoặc không có gì?

Những gì chúng ta gọi là "phong cách" thực sự bao gồm khá nhiều khái niệm:

• Bố cục - cách một thành phần / thành phần trông trong mối quan hệ với người khác
• Ngoại hình - đặc điểm của một yếu tố / thành phần
• Hành vi và trạng thái - làm thế nào một yếu tố / thành phần trông trong một trạng thái nhất định

Bắt đầu với phong cách nhà nước

React đã quản lý trạng thái của các thành phần của bạn, điều này tạo ra các kiểu trạng thái và hành vi phù hợp tự nhiên với colocation với logic thành phần của bạn.

Thay vì xây dựng các thành phần để kết xuất với các lớp trạng thái có điều kiện, hãy xem xét thêm trực tiếp các kiểu trạng thái:

// Typical component with state-classes
<li 
 className={classnames({ 'todo-list__item': true, 'is-complete': item.complete })} />


// Using inline-styles for state
<li className='todo-list__item'
 style={(item.complete) ? styles.complete : {}} />

Lưu ý rằng chúng tôi đang sử dụng một lớp để tạo kiểu dáng nhưng không còn sử dụng bất kỳ .is-lớp tiền tố nào cho trạng thái và hành vi .

Chúng tôi có thể sử dụng Object.assign(ES6) hoặc _.extend(gạch dưới / lodash) để thêm hỗ trợ cho nhiều trạng thái:

// Supporting multiple-states with inline-styles
<li 'todo-list__item'
 style={Object.assign({}, item.complete && styles.complete, item.due && styles.due )}>

Tùy biến và tái sử dụng

Bây giờ chúng tôi đang sử dụng Object.assignnó trở nên rất đơn giản để làm cho thành phần của chúng tôi có thể tái sử dụng với các kiểu khác nhau. Nếu chúng ta muốn ghi đè các kiểu mặc định, chúng ta có thể làm như vậy tại trang gọi với đạo cụ, như vậy : <TodoItem dueStyle={ fontWeight: "bold" } />. Thực hiện như thế này:

<li 'todo-list__item'
 style={Object.assign({},
         item.due && styles.due,
         item.due && this.props.dueStyles)}>

Bố trí

Cá nhân, tôi không thấy lý do thuyết phục cho các kiểu bố cục nội tuyến. Có một số hệ thống bố trí CSS tuyệt vời ngoài kia. Tôi chỉ sử dụng một.

Điều đó nói rằng, không thêm kiểu bố trí trực tiếp vào thành phần của bạn. Bọc các thành phần của bạn với các thành phần bố trí. Đây là một ví dụ.

// This couples your component to the layout system
// It reduces the reusability of your component
<UserBadge
 className="col-xs-12 col-sm-6 col-md-8"
 firstName="Michael"
 lastName="Chan" />

// This is much easier to maintain and change
<div class="col-xs-12 col-sm-6 col-md-8">
  <UserBadge
   firstName="Michael"
   lastName="Chan" />
</div>

Để hỗ trợ bố trí, tôi thường cố gắng thiết kế các thành phần được 100% widthvà height.

Xuất hiện

Đây là khu vực gây tranh cãi nhất trong cuộc tranh luận "kiểu nội tuyến". Cuối cùng, tùy thuộc vào thành phần thiết kế của bạn và sự thoải mái của nhóm với JavaScript.

Một điều chắc chắn, bạn sẽ cần sự trợ giúp của thư viện. Các trạng thái trình duyệt ( :hover, :focus) và truy vấn phương tiện rất đau trong React thô.

Tôi thích Radium vì cú pháp cho các phần cứng đó được thiết kế để mô hình hóa SASS.

Mã tổ chức

Thường thì bạn sẽ thấy một đối tượng kiểu bên ngoài mô-đun. Đối với thành phần danh sách việc cần làm, nó có thể trông giống như thế này:

var styles = {
  root: {
    display: "block"
  },
  item: {
    color: "black"

    complete: {
      textDecoration: "line-through"
    },

    due: {
      color: "red"
    }
  },
}

chức năng getter

Thêm một loạt logic kiểu vào mẫu của bạn có thể có một chút lộn xộn (như đã thấy ở trên). Tôi thích tạo các hàm getter để tính toán các kiểu:

React.createClass({
  getStyles: function () {
    return Object.assign(
      {},
      item.props.complete && styles.complete,
      item.props.due && styles.due,
      item.props.due && this.props.dueStyles
    );
  },

  render: function () {
    return <li style={this.getStyles()}>{this.props.item}</li>
  }
});

Xem thêm

Tôi đã thảo luận tất cả những điều này một cách chi tiết hơn tại React Europe vào đầu năm nay: Kiểu nội tuyến và khi tốt nhất là 'chỉ sử dụng CSS' .

Tôi rất vui khi được giúp đỡ khi bạn thực hiện những khám phá mới trên đường đi :) Hãy đánh tôi lên -> @chantastic

Thuộc tính style trong React mong muốn giá trị là một đối tượng, tức là cặp giá trị Key.

style = {}sẽ có một đối tượng khác bên trong nó muốn {float:'right'}làm cho nó hoạt động.

<span style={{float:'right'}}>{'Download Audit'}</span>

Hy vọng điều này giải quyết vấn đề

Tôi sử dụng nhiều kiểu nội tuyến trong các thành phần React của mình. Tôi thấy rõ ràng hơn rất nhiều khi định kiểu kiểu trong các thành phần bởi vì nó luôn rõ ràng kiểu mà thành phần đó làm và không có. Cộng với việc có toàn bộ sức mạnh của Javascript trong tay thực sự đơn giản hóa các nhu cầu tạo kiểu phức tạp hơn.

Ban đầu tôi không bị thuyết phục nhưng sau khi học được vài tháng, tôi đã hoàn toàn chuyển đổi và đang trong quá trình chuyển đổi tất cả CSS của mình sang các phương thức css theo hướng JS hoặc nội tuyến khác.

Bài thuyết trình này của nhân viên Facebook và người đóng góp React "vjeux" cũng thực sự hữu ích - https://speakerdeck.com/vjeux/react-css-in-js

Mục đích chính của thuộc tính style là dành cho các kiểu dựa trên trạng thái động. Ví dụ: bạn có thể có kiểu chiều rộng trên thanh tiến trình dựa trên một số trạng thái hoặc vị trí hoặc khả năng hiển thị dựa trên thứ khác.

Các kiểu trong JS áp đặt giới hạn rằng ứng dụng không thể cung cấp kiểu tùy chỉnh cho một thành phần có thể sử dụng lại. Điều này là hoàn toàn chấp nhận được trong các tình huống nói trên, nhưng không phải khi bạn thay đổi các đặc điểm có thể nhìn thấy, đặc biệt là màu sắc.

James K Nelson trong bức thư "Tại sao bạn không nên tạo kiểu cho các thành phần phản ứng với JavaScript" nói rằng thực sự không cần sử dụng kiểu nội tuyến với nhược điểm của nó. Tuyên bố của ông là css nhàm chán cũ với ít / scss là giải pháp tốt nhất. Một phần của luận điểm ủng hộ css:

• mở rộng ra bên ngoài
• đòn bẩy (kiểu nội tuyến chồng chéo mọi thứ)
• thiết kế thân thiện

Tạo kiểu trong JSX rất giống với kiểu trong HTML.

Trường hợp HTML:

div style = "màu nền: màu đỏ; màu: trắng"

Trường hợp JSX:

div style = {{backgroundColor: 'đỏ', màu: 'trắng'}}

Những gì tôi làm là cung cấp cho mỗi một thành phần có thể sử dụng lại của tôi một tên thành phần tùy chỉnh duy nhất và sau đó tạo tệp css cho thành phần đó, cụ thể, với tất cả các tùy chọn kiểu dáng cho thành phần đó (và chỉ cho thành phần đó).

var MyDiv = React.createClass({
  render: function() {
    return <custom-component style={style}> Have a good and productive day! </custom-component>;
  }
});

Và trong tệp 'custom-component.css', mọi mục nhập sẽ bắt đầu bằng thẻ thành phần tùy chỉnh:

custom-component { 
   display: block; /* have it work as a div */
   color: 'white'; 
   fontSize: 200; 
} 
custom-component h1 { 
  font-size: 1.4em; 
}

Điều đó có nghĩa là bạn không mất đi khái niệm quan trọng về việc tách mối quan tâm. Xem vs phong cách. Nếu bạn chia sẻ thành phần của mình, người khác sẽ dễ dàng tạo chủ đề cho nó phù hợp với phần còn lại của trang web của họ.

Điều đó thực sự phụ thuộc vào mức độ lớn của ứng dụng của bạn, nếu bạn muốn sử dụng các gói như webpack và gói CSS và JS cùng nhau trong quá trình xây dựng và cách bạn muốn điều chỉnh luồng ứng dụng của mình! Vào cuối ngày, tùy thuộc vào tình huống của bạn, bạn có thể đưa ra quyết định!

Sở thích của tôi để tổ chức các tệp trong các dự án lớn là tách các tệp CSS và JS , có thể chia sẻ dễ dàng hơn, người dùng UI dễ dàng hơn thông qua các tệp CSS, cũng tổ chức tệp gọn gàng hơn cho toàn bộ ứng dụng!

Luôn nghĩ theo cách này, đảm bảo trong giai đoạn phát triển, mọi thứ đều ở nơi chúng cần được đặt tên đúng và dễ dàng cho các nhà phát triển khác tìm thấy mọi thứ ...

Cá nhân tôi trộn chúng tùy thuộc vào nhu cầu của tôi, ví dụ ... Hãy thử sử dụng css bên ngoài, nhưng nếu cần React cũng sẽ chấp nhận kiểu, bạn cần chuyển nó dưới dạng một đối tượng có giá trị khóa, đại loại như sau:

import React from 'react';

const App = props => {
  return (
    <div className="app" style={{background: 'red', color: 'white'}}>  /*<<<<look at style here*/
      Hello World...
    </div>
  )
}

export default App;

Đây là kiểu dáng dựa trên boolean trong cú pháp JSX :

style={{display: this.state.isShowing ? "inherit" : "none"}}

Tôi thường có tập tin scss liên quan đến từng thành phần React. Nhưng, tôi không thấy lý do tại sao bạn sẽ không gói gọn thành phần đó bằng logic và tìm kiếm nó. Ý tôi là, bạn có điều tương tự với các thành phần web.

Tùy thuộc vào cấu hình nội tuyến của bạn có thể cung cấp cho bạn Tải lại nóng. Trang web ngay lập tức được hiển thị lại mỗi khi phong cách thay đổi. Điều này giúp tôi phát triển các thành phần nhanh hơn. Phải nói rằng, tôi chắc chắn rằng bạn có thể thiết lập môi trường tải lại nóng cho CSS + SCSS.

Bạn có thể sử dụng kiểu nội tuyến nhưng bạn sẽ có một số hạn chế nếu bạn đang sử dụng chúng trong tất cả các kiểu dáng của mình, một số hạn chế đã biết là bạn không thể sử dụng bộ chọn giả CSS và truy vấn phương tiện trong đó.

Bạn có thể sử dụng Radium để giải quyết vấn đề này nhưng tôi vẫn cảm thấy dự án phát triển sẽ trở nên cồng kềnh.

Tôi khuyên bạn nên sử dụng các mô-đun CSS .

sử dụng các Mô-đun CSS, bạn sẽ có quyền tự do viết CSS trong tệp CSS và không phải lo lắng về các xung đột đặt tên, việc này sẽ được các Mô-đun CSS chăm sóc.

Một lợi thế của phương pháp này là nó cung cấp cho bạn chức năng tạo kiểu cho thành phần cụ thể. Điều này sẽ tạo ra nhiều mã có thể duy trì hơn và kiến ​​trúc dự án dễ đọc hơn cho nhà phát triển tiếp theo làm việc với dự án của bạn.

Đối với một số thành phần, việc sử dụng các kiểu nội tuyến sẽ dễ dàng hơn. Ngoài ra, tôi thấy nó dễ dàng và ngắn gọn hơn (vì tôi đang sử dụng Javascript chứ không phải CSS) để tạo hiệu ứng cho các kiểu thành phần.

Đối với các thành phần độc lập, tôi sử dụng 'Toán tử trải rộng' hoặc '...'. Đối với tôi, nó rõ ràng, đẹp và hoạt động trong một không gian chật hẹp. Dưới đây là một hoạt hình tải nhỏ tôi đã thực hiện để hiển thị lợi ích của nó:

<div style={{...this.styles.container, ...this.state.opacity}}>
    <div style={{...this.state.colors[0], ...this.styles.block}}/>
    <div style={{...this.state.colors[1], ...this.styles.block}}/>
    <div style={{...this.state.colors[2], ...this.styles.block}}/>
    <div style={{...this.state.colors[7], ...this.styles.block}}/>
    <div style={{...this.styles.block}}/>
    <div style={{...this.state.colors[3], ...this.styles.block}}/>
    <div style={{...this.state.colors[6], ...this.styles.block}}/>
    <div style={{...this.state.colors[5], ...this.styles.block}}/>
    <div style={{...this.state.colors[4], ...this.styles.block}}/>
  </div>

    this.styles = {
  container: {
    'display': 'flex',
    'flexDirection': 'row',
    'justifyContent': 'center',
    'alignItems': 'center',
    'flexWrap': 'wrap',
    'width': 21,
    'height': 21,
    'borderRadius': '50%'
  },
  block: {
    'width': 7,
    'height': 7,
    'borderRadius': '50%',
  }
}
this.state = {
  colors: [
    { backgroundColor: 'red'},
    { backgroundColor: 'blue'},
    { backgroundColor: 'yellow'},
    { backgroundColor: 'green'},
    { backgroundColor: 'white'},
    { backgroundColor: 'white'},
    { backgroundColor: 'white'},
    { backgroundColor: 'white'},
    { backgroundColor: 'white'},
  ],
  opacity: {
    'opacity': 0
  }
}

EDIT THÁNG 11 NĂM 2019

Làm việc trong ngành (một công ty Fortune 500), tôi KHÔNG được phép thực hiện bất kỳ kiểu dáng nội tuyến nào. Trong nhóm của chúng tôi, chúng tôi đã quyết định rằng phong cách nội tuyến là không thể đọc được và không thể duy trì. Và, sau khi tận mắt thấy các kiểu nội tuyến làm cho việc hỗ trợ một ứng dụng hoàn toàn không thể chịu đựng được, tôi phải đồng ý. Tôi hoàn toàn không khuyến khích phong cách nội tuyến.

Vấn đề với các kiểu nội tuyến là Chính sách bảo mật nội dung (CSP) đang trở nên phổ biến hơn, điều này không cho phép. Do đó, tôi khuyên bạn nên tránh các kiểu nội tuyến hoàn toàn.

Cập nhật: Để giải thích thêm, CSP là các tiêu đề HTTP được gửi bởi máy chủ hạn chế nội dung nào có thể xuất hiện trên trang. Nó chỉ đơn giản là một sự giảm thiểu hơn nữa có thể được áp dụng cho một máy chủ để ngăn chặn kẻ tấn công làm điều gì đó nghịch ngợm nếu nhà phát triển mã hóa trang web kém.

Mục đích của hầu hết các hạn chế này là để ngăn chặn các cuộc tấn công XSS (kịch bản chéo trang). XSS là nơi kẻ tấn công tìm ra cách đưa javascript của riêng anh ta vào trang của bạn (ví dụ: nếu tôi tạo tên người dùng của mình bob<SCRIPT>alert("hello")</SCRIPT>và sau đó đăng nhận xét và bạn truy cập trang, nó không nên hiển thị cảnh báo). Các nhà phát triển nên từ chối khả năng để người dùng thêm nội dung như thế này vào trang web, nhưng chỉ trong trường hợp họ mắc lỗi, thì CSP sẽ chặn trang tải nếu tìm thấy bất kỳ script>thẻ nào .

CSP chỉ là một cấp độ bảo vệ bổ sung cho các nhà phát triển để đảm bảo nếu họ mắc lỗi, kẻ tấn công không thể gây ra sự cố cho khách truy cập vào trang web đó.

Vì vậy, tất cả đều là XSS, nhưng nếu kẻ tấn công không thể bao gồm <script>các thẻ nhưng có thể bao gồm <style>các thẻ hoặc bao gồm mộtstyle= tham số trên thẻ thì sao? Sau đó, anh ta có thể thay đổi giao diện của trang web theo cách mà bạn bị lừa nhấp vào nút sai hoặc một số vấn đề khác. Điều này ít quan tâm hơn, nhưng vẫn là điều cần tránh và CSP làm điều đó cho bạn.

Một tài nguyên tốt để kiểm tra một trang web cho CSP là https://securityheaders.io/

Bạn có thể đọc thêm về CSP tại: http://www.html5rocks.com/en/tutorials/security/content-security-policy/

So sánh với việc viết kiểu của bạn trong tệp css, thuộc tính kiểu của React có các ưu điểm sau :

1. Khả năng sử dụng các công cụ javascript làm ngôn ngữ lập trình cung cấp để kiểm soát phong cách của các yếu tố của bạn. Điều này bao gồm nhúng các biến, sử dụng các điều kiện và truyền các kiểu cho một thành phần con.
2. Một cách tiếp cận "thành phần". Không còn phân tách mã HTML, JS và mã CSS được viết cho thành phần. Mã thành phần được hợp nhất và được viết ở một nơi.

Tuy nhiên, thuộc tính kiểu của React đi kèm với một vài nhược điểm - bạn không thể

1. Không thể sử dụng truy vấn phương tiện truyền thông
2. Không thể sử dụng bộ chọn giả,
3. ít hiệu quả hơn so với các lớp CSS.

Sử dụng CSS trong JS, bạn có thể nhận được tất cả các lợi thế của thẻ kiểu, mà không có những nhược điểm đó . Cho đến ngày nay, có một vài css phổ biến được hỗ trợ tốt trong các thư viện js, bao gồm: Cảm xúc, Kiểu dáng-Thành phần và Radium. Những thư viện này là loại css của React đối với HTML. Chúng cho phép bạn viết CSS của bạn và kiểm soát CSS của bạn bằng mã JS.

hãy so sánh cách mã của chúng tôi sẽ tìm cách tạo kiểu cho một phần tử đơn giản. Chúng tôi sẽ tạo kiểu cho div "hello world" để nó hiển thị lớn trên máy tính để bàn và nhỏ hơn trên thiết bị di động.

Sử dụng thuộc tính style

return (
   <div style={{fontSize:24}} className="hello-world">
      Hello world
   </div>
)

Vì không thể truy vấn phương tiện trong thẻ kiểu, nên chúng ta phải thêm className vào thành phần và thêm quy tắc css.

@media screen and (max-width: 700px){
   .hello-world {
      font-size: 16px; 
   }
}

Sử dụng thẻ 10 css của Emotion

return (
   <div
      css={{
         fontSize: 24, 
         [CSS_CONSTS.MOBILE_MAX_MEDIA_QUERY]:{
            fontSize: 16 
         }
      }
   >
      Hello world
   </div>
)

Cảm xúc cũng hỗ trợ chuỗi mẫu cũng như các thành phần theo kiểu. Vì vậy, nếu bạn thích bạn có thể viết:

return (
   <Box>
      Hello world
   </Box>
)

const Box = styled.div`
   font-size: 24px; 
   ${CSS_CONSTS.MOBILE_MAX_MEDIA_QUERY}{
      font-size: 16px; 
   }
`

Đằng sau mũ trùm "Css in JS" sử dụng các lớp css. Cảm xúc đặc biệt được xây dựng với hiệu suất trong tâm trí và sử dụng bộ nhớ đệm. So với các thuộc tính kiểu React Css trong JS sẽ cung cấp hiệu suất tốt hơn.

Thực hành tốt nhất

Dưới đây là một vài thực hành tốt nhất tôi khuyên bạn nên:

1. Nếu bạn muốn định kiểu các phần tử của mình theo dòng hoặc trong JS của bạn, hãy sử dụng thư viện css-in-js, không sử dụng thuộc tính style.

Tôi có nên nhắm đến việc thực hiện tất cả các kiểu dáng theo cách này và không có kiểu nào được chỉ định trong tệp CSS của tôi không?

2. Nếu bạn sử dụng giải pháp css-in-js, không cần phải ghi kiểu trong tệp Css. Viết css của bạn trong JS là tốt hơn khi bạn có thể sử dụng tất cả các công cụ mà ngôn ngữ lập trình như JS cung cấp.

Tôi nên tránh hoàn toàn phong cách nội tuyến?

3. Cấu trúc mã kiểu của bạn trong JS khá giống với cấu trúc mã của bạn nói chung. Ví dụ:
   • nhận ra các kiểu lặp lại và viết chúng ở một nơi. Có hai cách để làm điều này trong Cảm xúc:

// option 1 - Write common styles in CONSTANT variables
// styles.js
export const COMMON_STYLES = {
   BUTTON: css`
      background-color: blue; 
      color: white; 
      :hover {
         background-color: dark-blue; 
      }
   `
}

// SomeButton.js
const SomeButton = (props) => {
   ...
   return (
      <button
         css={COMMON_STYLES.BUTTON}
         ...
      >
         Click Me
      </button>
   )
}

// Option 2 - Write your common styles in a dedicated component 

const Button = styled.button`
   background-color: blue; 
   color: white; 
   :hover {
      background-color: dark-blue; 
   }   
`

const SomeButton = (props) => {
   ...
   return (
      <Button ...> 
         Click me
      </Button>
   )
}

• Mẫu mã hóa phản ứng là các thành phần được đóng gói - HTML và JS điều khiển một thành phần được viết trong một tệp. Đó là nơi mã css / style của bạn để định kiểu thành phần đó.

• Khi cần thiết, thêm một prop kiểu dáng cho thành phần của bạn. Bằng cách này, bạn có thể sử dụng lại mã và kiểu được viết trong một thành phần con và tùy chỉnh nó theo nhu cầu cụ thể của bạn theo thành phần chính.

const Button = styled.button([COMMON_STYLES.BUTTON, props=>props.stl])

const SmallButton = (props)=>(
   <Button 
      ...
      stl={css`font-size: 12px`}
   >
      Click me if you can see me
   </Button>
)

const BigButton = (props) => (
   <Button
      ...
      stl={css`font-size: 30px;`}
   >
      Click me
   </Button>
)

Bạn cũng có thể sử dụng StrCSS, nó tạo ra các tên lớp riêng biệt và nhiều hơn nữa! Mã ví dụ sẽ như thế nào. Bạn có thể (tùy chọn) cài đặt tiện ích mở rộng VSCode từ Thị trường Visual Studio để hỗ trợ đánh dấu cú pháp!

nguồn: strcss

import { Sheet } from "strcss";
import React, { Component } from "react";

const sheet = new Sheet(`
  map button
    color green
    color red !ios
    fontSize 16
  on hover
    opacity .5
  at mobile
    fontSize 10
`);

export class User extends Component {
  render() {
    return <div className={sheet.map.button}>
      {"Look mom, I'm green!
      Unless you're on iOS..."}
    </div>;
  }
}

Đôi khi chúng ta yêu cầu tạo kiểu một số phần tử từ một thành phần nhưng nếu chúng ta chỉ hiển thị thành phần đó hoặc kiểu đó thì ít hơn thay vì sử dụng lớp CSS, chúng ta sẽ sử dụng kiểu nội tuyến trong phản ứng js. Kiểu nội tuyến Reacjs giống như kiểu nội tuyến HTML, chỉ các tên thuộc tính có một chút khác biệt

Viết kiểu của bạn trong bất kỳ thẻ nào bằng style = {{prop: "value"}}

import React, { Component } from "react";
    import { Redirect } from "react-router";

    class InlineStyle extends Component {
      constructor(props) {
        super(props);
        this.state = {};
      }

      render() {
        return (
          <div>
            <div>
              <div
                style={{
                  color: "red",
                  fontSize: 40,
                  background: "green"
                }}// this is inline style in reactjs
              >

              </div>
            </div>
          </div>
        );
      }
    }
    export default InlineStyle;

Cập nhật 2020: Cách tốt nhất là sử dụng một thư viện đã thực hiện công việc khó khăn cho bạn và không giết chết đội của bạn khi bạn thực hiện chuyển đổi như được chỉ ra bởi câu trả lời được chấp nhận ban đầu trong video này (nó vẫn phù hợp). Ngoài ra chỉ để hiểu được xu hướng thì đây là một biểu đồ rất hữu ích . Sau khi thực hiện nghiên cứu của riêng tôi về điều này, tôi đã chọn sử dụng Cảm xúc cho các dự án mới của mình và nó đã được chứng minh là rất linh hoạt và có thể mở rộng.

Cho rằng câu trả lời được đánh giá cao nhất từ ​​năm 2015 khuyến nghị Radium hiện đã được chuyển sang chế độ bảo trì . Vì vậy, có vẻ hợp lý để thêm một danh sách thay thế. Bài viết ngừng Radium gợi ý một vài thư viện. Mỗi trang web được liên kết đều có sẵn các ví dụ nên tôi sẽ không sao chép và dán mã ở đây.

• Cảm xúc được "lấy cảm hứng từ" các thành phần theo kiểu trong số các thành phần khác, sử dụng các kiểu trong js và có thể là thuyết bất khả tri, nhưng chắc chắn thúc đẩy thư viện React của nó. Cảm xúc đã được giữ cho đến nay cho bài viết này.
• các thành phần theo kiểu tương đương và cung cấp nhiều tính năng tương tự như Cảm xúc. Cũng tích cực được duy trì. Cả Emotion và các thành phần theo kiểu có cú pháp tương tự nhau. Nó được xây dựng đặc biệt để làm việc với các thành phần React.
• JSS Tuy nhiên, một tùy chọn khác cho các kiểu trong js là bất khả tri khung mặc dù nó có một số gói khung, React-JSS trong số đó.

Dù sao css nội tuyến không bao giờ được khuyến khích. Chúng tôi đã sử dụng các thành phần theo kiểu trong dự án của chúng tôi dựa trên JSS. Nó bảo vệ ghi đè css bằng cách thêm tên lớp động trên các thành phần. Bạn cũng có thể thêm các giá trị css dựa trên các đạo cụ được truyền.