React.js แนวทางปฏิบัติที่ดีที่สุดของสไตล์อินไลน์

ฉันทราบว่าคุณสามารถระบุสไตล์ภายในคลาส React เช่นนี้:

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

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

ฉันควรตั้งเป้าหมายที่จะจัดแต่งทรงผมด้วยวิธีนี้และไม่มีสไตล์ตามที่ระบุไว้ในไฟล์ CSS ของฉันหรือไม่?

หรือฉันควรหลีกเลี่ยงรูปแบบอินไลน์อย่างสมบูรณ์?

ดูเหมือนแปลกและยุ่งเหยิงที่จะทำทั้งสองอย่างเล็กน้อย - สถานที่สองแห่งจะต้องได้รับการตรวจสอบเมื่อปรับแต่งสไตล์

"แนวทางปฏิบัติที่ดีที่สุด" ยังมีไม่มาก พวกเราที่ใช้รูปแบบอินไลน์สำหรับองค์ประกอบ React ยังคงทำการทดลองอย่างมาก

มีหลายวิธีที่แตกต่างกันอย่างดุเดือด: ทำปฏิกิริยาแผนภูมิเปรียบเทียบ lib แบบอินไลน์

ทั้งหมดหรือไม่มีอะไร?

สิ่งที่เราเรียกว่า "สไตล์" จริง ๆ แล้วมีแนวคิดไม่กี่:

• เค้าโครง - ลักษณะองค์ประกอบ / ส่วนประกอบมีความสัมพันธ์กับผู้อื่นอย่างไร
• ลักษณะที่ปรากฏ - ลักษณะขององค์ประกอบ / ส่วนประกอบ
• พฤติกรรมและสถานะ - องค์ประกอบ / ส่วนประกอบมีลักษณะอย่างไรในสถานะที่กำหนด

เริ่มต้นด้วยลักษณะรัฐ

React กำลังจัดการสถานะของคอมโพเนนต์ของคุณอยู่แล้วซึ่งทำให้ลักษณะของสถานะและพฤติกรรมเหมาะสมกับการจัดวางด้วยตรรกะส่วนประกอบของคุณ

แทนที่จะสร้างส่วนประกอบเพื่อสร้างการแสดงผลแบบมีเงื่อนไขให้พิจารณาเพิ่มรูปแบบสถานะโดยตรง:

// 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 : {}} />

โปรดทราบว่าเรากำลังใช้คลาสลักษณะที่ปรากฏแต่ไม่ได้ใช้.is-คลาสที่นำหน้าสำหรับสถานะและพฤติกรรมอีกต่อไป

เราสามารถใช้Object.assign(ES6) หรือ_.extend(ขีดล่าง / lodash) เพื่อเพิ่มการสนับสนุนสำหรับหลายรัฐ:

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

การปรับแต่งและนำมาใช้ใหม่

ตอนนี้เรากำลังใช้งานอยู่Object.assignมันกลายเป็นเรื่องง่ายมากที่จะทำให้ส่วนประกอบของเราสามารถใช้ซ้ำได้ด้วยสไตล์ที่แตกต่าง <TodoItem dueStyle={ fontWeight: "bold" } />ถ้าเราต้องการที่จะแทนที่รูปแบบเริ่มต้นที่เราสามารถทำได้ในการเรียกสถานที่ที่มีอุปกรณ์ประกอบฉากเพื่อต้องการ: ดำเนินการดังนี้:

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

แบบ

โดยส่วนตัวฉันไม่เห็นเหตุผลที่น่าสนใจสำหรับสไตล์เลย์เอาต์แบบอินไลน์ มีระบบโครงร่าง CSS ที่ยอดเยี่ยมมากมาย ฉันแค่ใช้มัน

ที่กล่าวว่าอย่าเพิ่มสไตล์โครงร่างลงในองค์ประกอบของคุณโดยตรง ล้อมรอบส่วนประกอบของคุณด้วยส่วนประกอบเค้าโครง นี่คือตัวอย่าง

// 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>

สำหรับการสนับสนุนรูปแบบที่ผมมักจะพยายามที่จะออกแบบชิ้นส่วนที่จะเป็นและ100% widthheight

การปรากฏ

นี่คือพื้นที่ที่ถกเถียงกันมากที่สุดของการอภิปราย "แบบอินไลน์" ในที่สุดมันก็ขึ้นอยู่กับองค์ประกอบของการออกแบบและความสะดวกสบายของทีมด้วย JavaScript

สิ่งหนึ่งที่แน่นอนคือคุณจะต้องได้รับความช่วยเหลือจากห้องสมุด เบราว์เซอร์ - อเมริกา ( :hover, :focus), และสื่อ - แบบสอบถามมีความเจ็บปวดในการตอบสนองดิบ

ฉันชอบเรเดียมเนื่องจากวากยสัมพันธ์สำหรับส่วนที่ยากเหล่านั้นได้รับการออกแบบให้เป็นแบบจำลองของ SASS

รหัสองค์กร

บ่อยครั้งที่คุณจะเห็นวัตถุสไตล์นอกโมดูล สำหรับองค์ประกอบสิ่งที่ต้องทำรายการมันอาจมีลักษณะเช่นนี้:

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

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

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

ฟังก์ชั่นทะเยอทะยาน

การเพิ่มตรรกะของสไตล์ให้กับเทมเพลตของคุณอาจทำให้เกิดความยุ่งเหยิงเล็กน้อย (ดังที่เห็นด้านบน) ฉันต้องการสร้างฟังก์ชั่น getter เพื่อคำนวณสไตล์:

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>
  }
});

ดูเพิ่มเติม

ผมพูดสิ่งเหล่านี้ในรายละเอียดเพิ่มเติมได้ที่ตอบสนองยุโรปปีก่อนหน้านี้: อินไลน์ Styles และเมื่อดีที่สุดที่จะเพียง CSS ใช้ '

ฉันมีความสุขที่ได้ช่วยคุณค้นพบสิ่งใหม่ ๆ ตลอดเส้นทาง :) ตีฉัน -> @chantastic

แอตทริบิวต์ style ใน React ต้องการให้ค่าเป็นวัตถุเช่นคู่ของ Key Value

style = {}จะมีวัตถุอื่นอยู่ข้างในเหมือน{float:'right'}จะทำให้มันใช้งานได้

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

หวังว่านี่จะช่วยแก้ปัญหาได้

ฉันใช้รูปแบบอินไลน์อย่างกว้างขวางภายในส่วนประกอบ React ของฉัน ฉันพบว่ามันมีความชัดเจนมากขึ้นในการกำหนดสไตล์ colocate ภายในส่วนประกอบเพราะมันชัดเจนว่าสไตล์ใดที่คอมโพเนนต์ทำและไม่มี บวกกับการใช้งาน Javascript อย่างเต็มรูปแบบในมือช่วยลดความซับซ้อนของสไตล์ที่ซับซ้อนยิ่งขึ้น

ฉันไม่ได้เชื่อในตอนแรก แต่หลังจากเล่นน้ำไปหลายเดือนฉันก็แปลงอย่างเต็มที่และอยู่ระหว่างการแปลง CSS ทั้งหมดของฉันเป็นแบบอินไลน์หรือวิธีอื่น ๆ ที่ขับเคลื่อนด้วย JS

งานนำเสนอนี้โดยพนักงาน Facebook และผู้ตอบโต้ "vjeux" ก็มีประโยชน์เช่นกัน - https://speakerdeck.com/vjeux/react-css-in-js

วัตถุประสงค์หลักของคุณลักษณะรูปแบบมีไว้สำหรับแบบไดนามิกที่อิงตามสไตล์ ตัวอย่างเช่นคุณสามารถมีสไตล์ความกว้างบนแถบความคืบหน้าตามสถานะบางอย่างหรือตำแหน่งหรือการมองเห็นตามสิ่งอื่น

สไตล์ใน JS กำหนดข้อ จำกัด ที่แอปพลิเคชันไม่สามารถกำหนดสไตล์ที่กำหนดเองสำหรับส่วนประกอบที่นำมาใช้ซ้ำได้ นี่เป็นที่ยอมรับอย่างสมบูรณ์ในสถานการณ์ดังกล่าว แต่ไม่ใช่เมื่อคุณเปลี่ยนลักษณะที่มองเห็นได้โดยเฉพาะสี

James K Nelson ในจดหมายของเขา"ทำไมคุณไม่ควรสไตล์องค์ประกอบตอบโต้ด้วย JavaScript"ระบุว่าไม่จำเป็นต้องใช้รูปแบบอินไลน์กับข้อเสียของมัน คำพูดของเขาคือ css ที่น่าเบื่อเก่าที่มีน้อย / scss เป็นทางออกที่ดีที่สุด ส่วนหนึ่งของวิทยานิพนธ์เหล่านี้โปรดปราน css:

• ยืดจากภายนอก
• leverable (รูปแบบอินไลน์ซ้อนทับทุกอย่าง)
• นักออกแบบที่เป็นมิตร

จัดแต่งทรงผมใน JSX นั้นคล้ายคลึงกับสไตล์ใน HTML

กรณี HTML:

div style = "พื้นหลังสี: แดง; สี: ขาว"

กรณี JSX:

div style = {{backgroundColor: 'red', color: 'white'}}

สิ่งที่ฉันทำคือให้ชื่อองค์ประกอบแบบกำหนดเองที่ไม่ซ้ำใครแต่ละชิ้นขององค์ประกอบที่นำมาใช้ซ้ำได้แล้วสร้างไฟล์ css สำหรับองค์ประกอบนั้นโดยเฉพาะพร้อมตัวเลือกการจัดแต่งทรงผมทั้งหมดสำหรับส่วนประกอบนั้น (และสำหรับองค์ประกอบนั้นเท่านั้น)

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

และในไฟล์ 'custom-component.css' ทุกรายการจะเริ่มต้นด้วยแท็กที่กำหนดเอง:

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

นั่นหมายความว่าคุณจะไม่สูญเสียความคิดที่สำคัญของการแยกความกังวล ดูสไตล์ vs หากคุณแบ่งปันองค์ประกอบของคุณจะง่ายกว่าที่อื่นในการจัดวางองค์ประกอบให้ตรงกับส่วนที่เหลือของหน้าเว็บ

จริงๆมันขึ้นอยู่กับวิธีใหญ่ใบสมัครของคุณคือถ้าคุณอยากจะลองใช้ bundlers เช่นwebpackและ CSS และ JS มัดเข้าด้วยกันในการสร้างและวิธีที่คุณต้องการที่จะจัดการการไหลของแอพลิเคชันของคุณ! ในตอนท้ายของวันขึ้นอยู่กับสถานการณ์ของคุณคุณสามารถตัดสินใจ!

ความชอบของฉันสำหรับการจัดระเบียบไฟล์ในโครงการขนาดใหญ่กำลังแยกไฟล์CSS และ JS ออกจากกันมันอาจจะง่ายกว่าที่จะแบ่งปันและง่ายกว่าสำหรับคน UI ที่จะผ่านไฟล์ CSS และยังมีไฟล์ที่เรียงกันเป็นระเบียบ

คิดเสมอด้วยวิธีนี้ตรวจสอบให้แน่ใจว่าในการพัฒนาทุกอย่างเป็นที่ที่พวกเขาควรจะตั้งชื่ออย่างถูกต้องและเป็นเรื่องง่ายสำหรับนักพัฒนาคนอื่นในการค้นหาสิ่งต่าง ๆ ...

ฉันผสมพวกเขาเองขึ้นอยู่กับความต้องการของฉันเช่น ... ลองใช้ css ภายนอก แต่ถ้าจำเป็น React จะยอมรับสไตล์เช่นกันคุณต้องผ่านมันเป็นวัตถุที่มีค่าคีย์บางอย่างดังนี้:

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;

นี่คือการกำหนดสไตล์ตามบูลีนในไวยากรณ์JSX :

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

ฉันมักจะมีไฟล์ scss ที่เกี่ยวข้องกับแต่ละองค์ประกอบการตอบสนอง แต่ฉันไม่เห็นเหตุผลที่คุณจะไม่แค็ปซูลส่วนประกอบด้วยตรรกะและดูในนั้น ฉันหมายความว่าคุณมีสิ่งที่คล้ายกันกับองค์ประกอบของเว็บ

ขึ้นอยู่กับการกำหนดค่าอินไลน์สไตล์ของคุณสามารถให้คุณโหลดร้อน หน้าเว็บจะแสดงผลทันทีทุกครั้งที่มีการเปลี่ยนแปลงสไตล์ สิ่งนี้ช่วยให้ฉันพัฒนาส่วนประกอบได้เร็วขึ้น ต้องบอกว่าฉันแน่ใจว่าคุณสามารถตั้งค่าสภาพแวดล้อมที่โหลดร้อนสำหรับ CSS + SCSS

คุณสามารถใช้รูปแบบอินไลน์ แต่คุณจะมีข้อ จำกัด บางอย่างหากคุณใช้สไตล์เหล่านั้นในรูปแบบของคุณทั้งหมดข้อ จำกัด ที่ทราบบางประการคือคุณไม่สามารถใช้ตัวเลือกหลอกหลอก CSSและแบบสอบถามสื่อได้

คุณสามารถใช้เรเดียม เพื่อแก้ปัญหานี้ แต่ก็ยังรู้สึกว่าโครงการจะเติบโตขึ้นมันจะยุ่งยาก

ฉันจะแนะนำให้ใช้โมดูล CSS

การใช้โมดูล CSSคุณจะมีอิสระในการเขียน CSS ในไฟล์ CSS และไม่ต้องกังวลเกี่ยวกับการตั้งชื่อ clashes มันจะได้รับการดูแลโดยโมดูล CSS

ข้อได้เปรียบของวิธีนี้คือมันช่วยให้คุณใส่สไตล์การทำงานให้กับองค์ประกอบเฉพาะ สิ่งนี้จะสร้างรหัสที่สามารถบำรุงรักษาได้มากขึ้นและสถาปัตยกรรมโครงการที่อ่านได้สำหรับผู้พัฒนารายถัดไปเพื่อทำงานในโครงการของคุณ

สำหรับส่วนประกอบบางอย่างจะง่ายกว่าที่จะใช้รูปแบบอินไลน์ นอกจากนี้ฉันพบว่าง่ายและกระชับยิ่งขึ้น (เนื่องจากฉันใช้ Javascript และไม่ใช่ CSS) ในการสร้างลักษณะส่วนประกอบ

สำหรับส่วนประกอบแบบสแตนด์อโลนฉันใช้ 'ตัวกระจายการแพร่กระจาย' หรือ '... ' สำหรับฉันมันชัดเจนสวยงามและใช้งานได้ในพื้นที่ จำกัด นี่เป็นภาพเคลื่อนไหวการโหลดเล็กน้อยที่ฉันทำเพื่อแสดงให้เห็นถึงประโยชน์:

<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
  }
}

แก้ไขพฤศจิกายน 2019

ทำงานในอุตสาหกรรม (บริษัท Fortune 500) ฉันไม่ได้รับอนุญาตให้จัดแต่งทรงผมแบบอินไลน์ ในทีมของเราเราได้ตัดสินใจแล้วว่ารูปแบบอินไลน์ไม่สามารถอ่านได้และไม่สามารถบำรุงรักษาได้ และหลังจากที่ได้เห็นมือแรกว่ารูปแบบอินไลน์ช่วยสนับสนุนแอปพลิเคชันมากเกินไปฉันต้องยอมรับ ฉันไม่สนับสนุนสไตล์อินไลน์อย่างสมบูรณ์

ปัญหาเกี่ยวกับรูปแบบอินไลน์คือนโยบายความปลอดภัยของเนื้อหา (CSP) กำลังเป็นที่นิยมมากขึ้นซึ่งไม่อนุญาต ดังนั้นฉันขอแนะนำให้หลีกเลี่ยงสไตล์อินไลน์อย่างสมบูรณ์

อัปเดต: เพื่ออธิบายเพิ่มเติม CSP เป็นส่วนหัว HTTP ที่เซิร์ฟเวอร์ส่งซึ่ง จำกัด เนื้อหาที่สามารถปรากฏบนหน้าเว็บ เป็นเพียงการบรรเทาเพิ่มเติมที่สามารถนำไปใช้กับเซิร์ฟเวอร์เพื่อหยุดยั้งผู้โจมตีไม่ให้ทำอะไรที่น่ารังเกียจถ้าผู้พัฒนารหัสเว็บไซต์ไม่ดี

วัตถุประสงค์ของข้อ จำกัด เหล่านี้ส่วนใหญ่คือเพื่อหยุดการโจมตี XSS (การสคริปต์ข้ามไซต์) XSS เป็นที่ที่ผู้โจมตีระบุวิธีการรวมจาวาสคริปต์ของตัวเองในหน้าของคุณ (ตัวอย่างเช่นถ้าฉันสร้างชื่อผู้ใช้ของฉันbob<SCRIPT>alert("hello")</SCRIPT>แล้วโพสต์ความคิดเห็นและคุณเยี่ยมชมหน้านั้นไม่ควรแสดงการแจ้งเตือน) นักพัฒนาควรปฏิเสธความสามารถในการเพิ่มเนื้อหาเช่นนี้ลงในไซต์ แต่ในกรณีที่พวกเขาทำผิดพลาด CSP จะบล็อกไม่ให้โหลดหน้าเว็บหากพบscript>แท็กใด ๆ

CSP เป็นเพียงระดับการป้องกันเพิ่มเติมสำหรับนักพัฒนาเพื่อให้แน่ใจว่าพวกเขาทำผิดพลาดซึ่งผู้โจมตีไม่สามารถสร้างปัญหาให้กับผู้เยี่ยมชมไซต์

ดังนั้นทั้งหมดคือ XSS แต่ถ้าผู้โจมตีไม่สามารถรวม<script>แท็ก แต่สามารถรวม<style>แท็กหรือรวมstyle=พารามิเตอร์ในแท็กได้ จากนั้นเขาอาจจะสามารถเปลี่ยนรูปลักษณ์ของเว็บไซต์ในแบบที่คุณหลอกให้คลิกปุ่มผิดหรือปัญหาอื่น ๆ นี่เป็นเรื่องกังวลน้อยกว่า แต่ก็ยังมีบางสิ่งที่ควรหลีกเลี่ยงและ CSP ก็ทำเพื่อคุณ

แหล่งข้อมูลที่ดีสำหรับการทดสอบไซต์สำหรับ CSP คือhttps://securityheaders.io/

คุณสามารถอ่านเพิ่มเติมเกี่ยวกับ CSP ได้ที่: http://www.html5rocks.com/en/tutorials/security/content-security-policy/

เมื่อเปรียบเทียบกับการเขียนสไตล์ของคุณในไฟล์ css แอตทริบิวต์ style ของ React มีข้อดีดังต่อไปนี้ :

1. ความสามารถในการใช้เครื่องมือจาวาสคริปต์เป็นภาษาโปรแกรมเพื่อควบคุมรูปแบบขององค์ประกอบของคุณ ซึ่งรวมถึงตัวแปรการฝังการใช้เงื่อนไขและการส่งสไตล์ไปยังองค์ประกอบย่อย
2. วิธีการ "ส่วนประกอบ" ไม่มีการแยกโค้ด HTML, JS และ CSS เพิ่มเติมสำหรับคอมโพเนนต์ รหัสของส่วนประกอบนั้นถูกรวบรวมและเขียนไว้ในที่เดียว

อย่างไรก็ตามคุณลักษณะสไตล์ของ React นั้นมาพร้อมกับข้อเสียเล็กน้อย - คุณทำไม่ได้

1. ไม่สามารถใช้การสืบค้นสื่อ
2. ไม่สามารถใช้ตัวเลือกแบบหลอกได้
3. ประสิทธิภาพที่ลดลงเมื่อเทียบกับคลาส CSS

การใช้ CSS ใน JS คุณจะได้รับประโยชน์ทั้งหมดของแท็กสไตล์ไม่มีข้อบกพร่องเหล่านั้น ณ วันนี้มี css ที่ได้รับความนิยมที่ได้รับการสนับสนุนเป็นอย่างดีใน js-libraries รวมไปถึง: Emotion, Styled-Components และ Radium ไลบรารีเหล่านั้นจะใช้ CSS ว่า React คืออะไรกับ HTML พวกเขาอนุญาตให้คุณเขียน CSS และควบคุม CSS ของคุณในรหัส JS ของคุณ

ลองเปรียบเทียบว่าโค้ดของเราจะมองการจัดแต่งทรงผมเป็นองค์ประกอบที่เรียบง่ายอย่างไร เราจะจัดวาง div "hello world" เพื่อให้แสดงบนเดสก์ท็อปและบนมือถือมีขนาดเล็กลง

การใช้คุณสมบัติสไตล์

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

เนื่องจากการสืบค้นสื่อเป็นไปไม่ได้ในแท็กสไตล์เราจะต้องเพิ่ม className ให้กับองค์ประกอบและเพิ่มกฎ css

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

ใช้แท็ก 10 css ของ Emotion

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

Emotion ยังสนับสนุนสตริงเทมเพลตรวมถึงส่วนประกอบที่มีสไตล์ด้วย ดังนั้นหากคุณต้องการคุณสามารถเขียน:

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

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

เบื้องหลังหมวก "Css ใน JS" ใช้คลาส css อารมณ์นั้นสร้างขึ้นโดยคำนึงถึงประสิทธิภาพและใช้แคช เมื่อเปรียบเทียบกับแอตทริบิวต์ลักษณะการตอบสนอง Css ใน JS จะให้ประสิทธิภาพที่ดีขึ้น

ปฏิบัติที่ดีที่สุด

นี่เป็นแนวทางปฏิบัติบางประการที่ฉันแนะนำ:

1. หากคุณต้องการสไตล์องค์ประกอบของคุณแบบอินไลน์หรือใน JS ของคุณใช้ห้องสมุด css-in-js อย่าใช้แอตทริบิวต์สไตล์

ฉันควรตั้งเป้าหมายที่จะจัดแต่งทรงผมด้วยวิธีนี้และไม่มีสไตล์ตามที่ระบุไว้ในไฟล์ CSS ของฉันหรือไม่?

2. หากคุณใช้โซลูชัน css-in-js ไม่จำเป็นต้องเขียนสไตล์ในไฟล์ Css การเขียน css ของคุณใน JS นั้นเหนือกว่าเพราะคุณสามารถใช้เครื่องมือทั้งหมดที่เป็นภาษาการเขียนโปรแกรมตามที่ JS ให้

ฉันควรหลีกเลี่ยงรูปแบบอินไลน์อย่างสมบูรณ์หรือไม่

3. การสร้างโค้ดสไตล์ของคุณใน JS นั้นคล้ายคลึงกับการสร้างโค้ดของคุณโดยทั่วไป ตัวอย่างเช่น:
   • รู้จักสไตล์ที่ทำซ้ำและเขียนในที่เดียว มีสองวิธีในการทำเช่นนี้ใน Emotion:

// 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>
   )
}

• รูปแบบการเข้ารหัสปฏิกิริยาขององค์ประกอบที่ห่อหุ้ม - HTML และ JS ที่ควบคุมองค์ประกอบจะถูกเขียนในไฟล์เดียว นั่นคือที่ที่ css / style code ของคุณเพื่อจัดวางองค์ประกอบ

• เมื่อจำเป็นให้เพิ่มเสาจัดแต่งทรงผมให้กับส่วนประกอบของคุณ วิธีนี้คุณสามารถใช้รหัสและลักษณะที่เขียนในองค์ประกอบย่อยอีกครั้งและปรับแต่งตามความต้องการเฉพาะของคุณโดยใช้องค์ประกอบหลัก

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>
)

คุณสามารถใช้ StrCSS ได้เช่นกันสร้างชื่อ class แยกและอีกมากมาย! รหัสตัวอย่างจะมีลักษณะเช่น คุณสามารถติดตั้งส่วนขยาย VSCode จาก Visual Studio Marketplace เพื่อสนับสนุนการเน้นไวยากรณ์

แหล่งที่มา: 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>;
  }
}

บางครั้งเราต้องการสไตล์องค์ประกอบจากองค์ประกอบ แต่ถ้าเราต้องแสดงองค์ประกอบนั้นเพียงอย่างเดียวหรือสไตล์นั้นน้อยดังนั้นแทนที่จะใช้คลาส CSS เราไปสำหรับสไตล์อินไลน์ในการตอบสนอง js ลักษณะแบบอินไลน์ reactjs เหมือนกับสไตล์อินไลน์ HTML เพียงชื่อคุณสมบัติจะแตกต่างกันเล็กน้อย

เขียนสไตล์ของคุณในแท็กโดยใช้ 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;

2563 อัปเดต:แนวทางปฏิบัติที่ดีที่สุดคือการใช้ห้องสมุดที่ทำงานหนักให้กับคุณแล้วและไม่ฆ่าทีมของคุณเมื่อคุณทำการสลับตามที่ระบุไว้โดยคำตอบที่ได้รับการยอมรับ แต่เดิมในวิดีโอนี้ (มันยังเกี่ยวข้อง) นอกจากนี้เพียงเพื่อให้ได้ความรู้สึกเกี่ยวกับแนวโน้มนี้เป็นแผนภูมิที่เป็นประโยชน์มาก หลังจากทำวิจัยของฉันเองฉันเลือกใช้ Emotion สำหรับโครงการใหม่ของฉันและได้พิสูจน์แล้วว่ามีความยืดหยุ่นและปรับขนาดได้

ระบุว่าคำตอบที่ได้รับการโหวตมากที่สุดจากเรเดียมที่แนะนำในปี 2015 ซึ่งขณะนี้ได้ลดระดับลงสู่โหมดการบำรุงรักษาแล้ว ดังนั้นจึงมีเหตุผลที่จะเพิ่มรายการทางเลือก โพสต์หยุดเรเดียมแสดงให้เห็นไม่กี่ห้องสมุด แต่ละไซต์ที่เชื่อมโยงมีตัวอย่างพร้อมใช้งานดังนั้นฉันจะละเว้นจากการคัดลอกและวางรหัสที่นี่

• อารมณ์ซึ่งเป็น "แรงบันดาลใจจาก" สไตล์ - ส่วนประกอบอื่น ๆ ใช้สไตล์ใน js และสามารถเป็นผู้ไม่เชื่อเรื่องพระเจ้าในกรอบ แต่แน่นอนสนับสนุนห้องสมุดปฏิกิริยาของมัน อารมณ์ได้รับการปรับปรุงให้ทันสมัยอยู่เสมอในโพสต์นี้
• องค์ประกอบที่มีสไตล์นั้นเปรียบได้และมีคุณสมบัติมากมายเช่นเดียวกับ Emotion นอกจากนี้ยังได้รับการบำรุงรักษาอย่างแข็งขัน ทั้งอารมณ์และองค์ประกอบสไตล์มีไวยากรณ์คล้ายกัน มันถูกสร้างขึ้นโดยเฉพาะเพื่อทำงานกับส่วนประกอบของ React
• JSSยังมีอีกตัวเลือกสำหรับสไตล์ใน js ซึ่งเป็นเฟรมเวิร์กที่ไม่เชื่อเรื่องพระเจ้าถึงแม้ว่ามันจะมีแพ็กเกจเฟรมเวิร์กจำนวนมาก React-JSS ในหมู่พวกเขา

ไม่แนะนำให้ใช้อินไลน์ css เราใช้องค์ประกอบแบบในโครงการของเราซึ่งอยู่บนพื้นฐานของ JSS มันป้องกัน css แทนที่โดยการเพิ่มชื่อคลาสแบบไดนามิกในส่วนประกอบ นอกจากนี้คุณยังสามารถเพิ่มค่า css ตาม props ที่ส่งไปได้