Najlepsze praktyki w stylu Inact.js

512

Wiem, że możesz określić style w klasach React, takie jak to:

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

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

Czy powinienem dążyć do stylizacji w ten sposób i nie mieć żadnych stylów określonych w moim pliku CSS?

Czy powinienem całkowicie unikać stylów wbudowanych?

To trochę dziwne i niechlujne, aby zrobić trochę obu - dwa miejsca musiałyby zostać sprawdzone podczas poprawiania stylu.

eye_mew
źródło
Możesz użyć motywu reagowania, aby uporządkować style wbudowane i ułatwić ich dostosowanie podczas budowania komponentu wielokrotnego użytku. Działa podobnie do ThemeManager w materialnym interfejsie użytkownika .
mantramantramantra
6
Rozważ użycie github.com/css-modules/css-modules . github.com/gajus/react-css-modules jest implementacją React (której jestem autorem). Moduły CSS i React Moduły CSS automatycznie odwzorowują nazwy klas komponentów na moduły CSS, którym przypisano unikalną nazwę w zakresie dokumentu.
Gajus
1
Używam CSS podczas pisania zapytań o media. Używam również klas z podstawowej biblioteki CSS, takich jak bootstrap.
vijayst
Używanie atrybutu style jako podstawowego środka stylizacji elementów nie jest ogólnie zalecane. ( reagjs.org/docs/dom-elements.html#style )
Omid Ebrahimi
Na dzień dzisiejszy zalecam użycie rozwiązania css-in-js. Ma wszystkie zalety atrybutu style, bez wad. Napisałem odpowiedź stackoverflow.com/questions/26882177/…
Ben Carp

Odpowiedzi:

463

Nie ma jeszcze wielu „najlepszych praktyk”. Ci z nas, którzy używają stylów wbudowanych do komponentów React, nadal bardzo eksperymentują.

Istnieje wiele podejść, które są bardzo różne: React Tabela porównawcza lib w stylu wbudowanym

Wszystko albo nic?

To, co nazywamy „stylem”, zawiera w rzeczywistości sporo pojęć:

  • Układ - jak element / komponent wygląda w relacji do innych
  • Wygląd - charakterystyka elementu / komponentu
  • Zachowanie i stan - jak element / komponent wygląda w danym stanie

Zacznij od stylów państwowych

React już zarządza stanem twoich komponentów, dzięki czemu style stanu i zachowania są w naturalny sposób dostosowane do kolokacji z logiką komponentów.

Zamiast budować komponenty do renderowania z warunkowymi klasami stanów, rozważ bezpośrednie dodanie stylów:

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

Zauważ, że używamy klasy do stylizowania wyglądu, ale nie używamy już żadnych .is-klas z prefiksem dla stanu i zachowania .

Możemy użyć Object.assign(ES6) lub _.extend(podkreślenie / lodash), aby dodać obsługę wielu stanów:

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

Personalizacja i możliwość ponownego użycia

Teraz, gdy Object.assigngo używamy , staje się bardzo proste, aby nasz komponent mógł być wielokrotnie wykorzystywany w różnych stylach. Jeśli chcemy, aby zastąpić style domyślne, możemy to zrobić w miejscu połączenia z rekwizytów, tak: <TodoItem dueStyle={ fontWeight: "bold" } />. Zaimplementowane w ten sposób:

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

Układ

Osobiście nie widzę przekonującego powodu, aby wstawiać style układu. Istnieje wiele świetnych układów CSS. Po prostu użyłbym jednego.

To powiedziawszy, nie dodawaj stylów układu bezpośrednio do swojego komponentu. Zawiń komponenty komponentami układu. Oto przykład.

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

W celu obsługi układu często próbuję zaprojektować komponenty, które będą 100% widthi height.

Wygląd

Jest to najbardziej kontrowersyjny obszar debaty „w stylu”. Ostatecznie, to zależy od twojego projektu i wygody twojego zespołu dzięki JavaScript.

Jedno jest pewne, będziesz potrzebować pomocy biblioteki. Stany przeglądarek ( :hover, :focus) i zapytania o media są bolesne w surowym React.

Lubię Radium, ponieważ składnia tych twardych części ma na celu modelowanie SASS.

Organizacja kodu

Często zobaczysz obiekt stylu na zewnątrz modułu. W przypadku komponentu listy zadań może wyglądać mniej więcej tak:

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

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

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

funkcje gettera

Dodanie do szablonu kilku stylów logiki może być nieco nieporządne (jak pokazano powyżej). Lubię tworzyć funkcje pobierające do obliczania stylów:

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

Dalsze oglądanie

Omówiłem to wszystko bardziej szczegółowo na React Europe na początku tego roku: Style Inline i kiedy najlepiej „po prostu używać CSS” .

Cieszę się, że pomagam, gdy dokonujesz nowych odkryć po drodze :) Hit me up -> @chantastic

chantastyczny
źródło
10
Świetna lektura. Bardzo doceniam również ważną rozmowę , @chantastic. #accepted
eye_mew
5
„Zawiń komponenty komponentami układu”: takie oczywiste, ale dokładnie to, czego potrzebowałem.
tandrewnichols,
2
@chantastic świetna odpowiedź. Rok później, czy to wszystko prawda? Tylko tak naprawdę dopiero wchodziłem w React i pomysł wbudowanego stylu i po prostu zastanawiałem się, czy coś się zmieniło, odkąd opublikowałeś tę odpowiedź.
alexrussell
4
@alexrussell dzięki! myślę, że odpowiedź tutaj nadal trzyma się całkiem dobrze. jedynym obszarem, który się zmienił, jest to, że Afrodyta wydaje się być preferowaną przez społeczność biblioteką inline-stiles (nad Radem) - choć tak naprawdę jest to kwestia osobistych preferencji.
chantastic
2
@alexrussell oops. przypadkowo przesłane wcześnie. Teraz używam tej techniki komponentów do stylizowania moich komponentów. pomysł jest dość prosty. tworzyć komponenty, które są zainteresowane tylko z zastosowaniem stylu i komponowania z nich, zamiast div, span, aitp pomoże styl keep samodzielnie niezależnie od korzystania z biblioteki. reagpatterns.com/#Style komponent
chantastic
135

Atrybut stylu w React oczekuje wartości jako obiektu, tj. Pary wartości klucza.

style = {}będzie miał w środku kolejny przedmiot, {float:'right'}który sprawi, że będzie działać.

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

Mam nadzieję, że to rozwiązuje problem

anandharshan
źródło
3
tak jak użyć zapytania mediów dla tego samego jeśli chcę używać klas CSS w pliku JS
Pardeep Jain
@PardeepJain Jednym ze sposobów wykorzystania Emocji jest pełny wykład, jeśli jesteś zainteresowany spotkaniem na szczycie meet.js 2018
Bruno Finger
Wadą tego podejścia jest to, że definiowanie stylów wbudowanych tworzy za każdym razem nowy obiekt. Powoduje to różnicę w stylerekwizytach, co może prowadzić do problemów z wydajnością. Przynajmniej zdefiniuj taki stały styl poza swoim render. Mam nadzieję że to pomoże!
Dawson B
49

Używam stylów wbudowanych w moich komponentach React. Kolokacja stylów w komponentach jest dla mnie o wiele bardziej przejrzysta, ponieważ zawsze jest jasne, jakie style ma dany komponent, a których nie. Dodatkowo posiadanie pełnej mocy Javascript naprawdę upraszcza bardziej złożone potrzeby stylizacji.

Na początku nie byłem przekonany, ale po kilku miesiącach zagłębiania się, jestem w pełni przekonwertowany i jestem w trakcie konwersji całego mojego CSS na wbudowane lub inne metody CSS oparte na JS.

Bardzo przydatna jest również prezentacja pracownika Facebooka i współpracownika React „vjeux” - https://speakerdeck.com/vjeux/react-css-in-js

Kyle Mathews
źródło
5
Jak przejść do tworzenia responsywnych układów ze stylami wbudowanymi? Nie masz tutaj opcji zapytań o media.
Zeus
Masz moc js, js może wykrywać rozmiary przeglądarek, aby dynamicznie budować style.
JordyvD,
3
@ g3mini że nie jest to zalecana podejście teraz, tak czy inaczej, ponieważ istnieją dużo bardziej wydajne rozwiązania do układania elementów, takich jak CSS Modules, styled-componentsi innych.
Denialos,
W js też jest css =) W tej chwili wolę używać modułów CSS.
JordyvD
Jedną z rzeczy, które nie są tu brane pod uwagę, jest to, że bardzo łatwo jest zobaczyć style nadrzędne i podrzędne w tym samym pliku SASS, podczas gdy jeśli potrzebujesz przyjrzeć się regułom w różnych komponentach, być może będziesz musiał otwierać i zamykać wiele plików.
Ringo
23

Głównym celem atrybutu style są dynamiczne style oparte na stanie. Na przykład możesz mieć styl szerokości na pasku postępu w oparciu o jakiś stan, lub pozycję lub widoczność w oparciu o coś innego.

Style w JS nakładają ograniczenie, że aplikacja nie może zapewnić niestandardowego stylu dla komponentu wielokrotnego użytku. Jest to całkowicie dopuszczalne w wyżej wymienionych sytuacjach, ale nie w przypadku zmiany widocznych cech, zwłaszcza koloru.

Bandyta
źródło
Pokrewnym pomysłem, jaki mieliśmy od jakiegoś czasu, jest możliwość wyodrębnienia określonych reguł CSS dla komponentu React za pomocą gulp i LESS. To tak, jakby ustawić konkretną nazwę klasy dla każdego komponentu, a następnie dodać określony CSS dla tej klasy w pliku komponentu. To miałoby sens.
David Hellsing
Często używam nazw klas w formacie „component- {app} - {componentName}”. „{app}” może być nazwą aplikacji lub „wspólną” dla komponentów niezależnych od aplikacji. np. „component-foo-todo-list” dla TodoList i „component-common-light-switch-switch-toggle”. Dla spakowanych komponentów {app} będzie nazwą npm. Czy o to ci chodzi?
Brigand,
Tak, cóż, konwencja nazewnictwa to jedno, ale najważniejsze jest dodanie izolowanych reguł CSS do tego samego pliku js komponentu.
David Hellsing
2
To nie jest prawda. Możesz definitywnie zastosować niestandardowe style, aby reagować na komponenty. Komponent musi tylko połączyć swój obiekt stylu z obiektem przekazywanym z góry, który może pochodzić z danych aplikacji. Zobacz ostatnie slajdy z speakerdeck.com/vjeux/react-css-in-js jak wspomniano poniżej
Flion
Jasne, jeśli komponent jest pojedynczym elementem, ale biorąc pod uwagę, <div><a>foo <b>bar</b></a><table>...</table></div>jak stylizujesz to z rekwizytów? Należy pamiętać, że struktura html powinna pozostać szczegółem implementacji, w przeciwnym razie tracisz wiele składników korzyści.
Brigand
18

James K Nelson w swoim liście „Dlaczego nie należy stylizować reagowania na komponenty za pomocą JavaScriptu” stwierdza, że ​​tak naprawdę nie ma potrzeby stosowania stylów wewnętrznych z jego wadami. Stwierdził, że stare nudne css z less / scss jest najlepszym rozwiązaniem. Część jego tez na korzyść css:

  • z możliwością rozszerzenia na zewnątrz
  • dźwignia (style inline nakładają się na wszystko)
  • przyjazny dla projektantów
alex_1948511
źródło
10

Stylowanie w JSX jest bardzo podobne do stylu w HTML.

Sprawa HTML:

div style = "kolor tła: czerwony; kolor: biały"

Obudowa JSX:

styl div = {{backgroundColor: „czerwony”, kolor: „biały”}}

Vivek Mehta
źródło
8

To, co robię, to nadanie każdemu z moich komponentów wielokrotnego użytku unikalnej niestandardowej nazwy elementu, a następnie utworzenie pliku css dla tego komponentu, w szczególności ze wszystkimi opcjami stylizacji dla tego komponentu (i tylko dla tego komponentu).

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

W pliku „custom-component.css” każdy wpis zaczyna się od tagu custom-component:

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

Oznacza to, że nie tracisz krytycznego pojęcia oddzielenia troski. Zobacz kontra styl. Jeśli udostępniasz swój komponent, innym łatwiej jest dopasować go do reszty strony.

poszerzony
źródło
Tak to robię. Jedynym minusem jest to, że są to dwa pliki zamiast jednego. Moge z tym zyc.
Sos
5

To naprawdę zależy od tego jak duża aplikacja jest, jeśli chcę użyć bundlers jak WebPack i wiązki CSS i JS razem w budowie i jak chce Ci mange przepływ aplikacji! Pod koniec dnia, w zależności od sytuacji, możesz podjąć decyzję!

Preferuję organizowanie plików w dużych projektach, oddzielając pliki CSS i JS , może być łatwiejsze udostępnianie, łatwiejsi użytkownicy interfejsu użytkownika mogą po prostu przeglądać pliki CSS, a także znacznie bardziej uporządkowane organizowanie plików dla całej aplikacji!

Zawsze myśl w ten sposób, upewnij się, że na etapie opracowywania wszystko jest tam, gdzie powinno być, odpowiednio nazwane i być łatwe dla innych programistów, aby znaleźć rzeczy ...

Osobiście mieszam je w zależności od moich potrzeb, na przykład ... Spróbuj użyć zewnętrznego css, ale w razie potrzeby React zaakceptuje również styl, musisz przekazać go jako obiekt o kluczowej wartości, coś takiego:

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;
Alireza
źródło
5

Oto stylizacja boolowska w składni JSX :

style={{display: this.state.isShowing ? "inherit" : "none"}}
Anupam Maurya
źródło
3

Zwykle mam plik scss powiązany z każdym komponentem React. Ale nie widzę powodu, dla którego nie zamkniesz komponentu logiką i nie spojrzysz na to. Mam na myśli, że masz podobne rzeczy z komponentami internetowymi.

dakt
źródło
3

W zależności od konfiguracji wbudowany styl może zaoferować Ci przeładowanie na gorąco. Strona internetowa jest natychmiast ponownie renderowana przy każdej zmianie stylu. Pomaga mi to szybciej opracowywać komponenty. Mimo to jestem pewien, że możesz skonfigurować środowisko Hot Reload dla CSS + SCSS.

Chłopak
źródło
3

Możesz używać stylów wbudowanych, ale będziesz mieć pewne ograniczenia, jeśli używasz ich we wszystkich swoich stylach, niektóre znane ograniczenia to to, że nie możesz używać pseudo selektorów CSS i zapytań o media .

Możesz użyć Radium, aby rozwiązać ten problem, ale wydaje mi się, że projekt staje się nieporęczny.

Polecam korzystanie z modułów CSS .

używając modułów CSS będziesz mieć swobodę pisania CSS w pliku CSS i nie będziesz musiał martwić się o konflikty nazw, zajmą się tym Moduły CSS.

Zaletą tej metody jest to, że zapewnia funkcjonalność stylizacji dla konkretnego komponentu. Spowoduje to utworzenie znacznie łatwiejszego do utrzymania kodu i czytelnej architektury projektu dla następnego programisty, który będzie mógł pracować nad Twoim projektem.

Praveen Rao Chavan.G
źródło
3

W przypadku niektórych komponentów łatwiej jest używać stylów wbudowanych. Ponadto uważam, że łatwiej i bardziej zwięźle (ponieważ używam Javascript, a nie CSS) do animowania stylów komponentów.

W przypadku komponentów autonomicznych korzystam z „Spread Operator” lub „...”. Dla mnie jest czysty, piękny i działa w ciasnej przestrzeni. Oto mała animacja ładowania, którą wykonałem, aby pokazać jej zalety:

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

EDYCJA LISTOPADA 2019

Pracując w branży (firma z listy Fortune 500), NIE wolno mi tworzyć żadnych stylizacji. W naszym zespole zdecydowaliśmy, że styl wbudowany jest nieczytelny i niemożliwy do utrzymania. Po tym, jak zobaczyłem z pierwszej ręki, w jaki sposób style wbudowane sprawiają, że wspieranie aplikacji jest całkowicie nie do zniesienia, musiałbym się zgodzić. Całkowicie odradzam style inline.

VocoJax
źródło
2

Problem ze stylami wbudowanymi polega na tym, że polityki bezpieczeństwa treści (CSP) stają się coraz bardziej powszechne, co na to nie pozwala. Dlatego zalecam całkowite unikanie stylów wbudowanych.

Aktualizacja: aby wyjaśnić dalej, CSP to nagłówki HTTP wysyłane przez serwer, które ograniczają zawartość, która może pojawić się na stronie. Jest to po prostu kolejne ograniczenie, które można zastosować na serwerze, aby powstrzymać atakującego przed zrobieniem czegoś niegrzecznego, jeśli programista źle koduje witrynę.

Celem większości tych ograniczeń jest powstrzymanie ataków XSS (cross-site scripting). XSS jest miejscem, w którym atakujący wymyśla sposób umieszczenia własnego javascript na twojej stronie (na przykład, jeśli utworzę moją nazwę użytkownika, bob<SCRIPT>alert("hello")</SCRIPT>a następnie opublikuję komentarz, a ty odwiedzisz stronę, nie powinien wyświetlać alertu). Programiści powinni odmówić możliwości dodania przez użytkownika takiej treści do witryny, ale na wypadek, gdyby popełnili błąd, CSP blokuje ładowanie strony, jeśli znajdzie jakieś script>tagi.

CSP to tylko dodatkowy poziom ochrony dla programistów, aby zapewnić, że jeśli popełnią błąd, osoba atakująca nie może powodować problemów osobom odwiedzającym tę witrynę.

Czyli wszystko to jest XSS, ale co jeśli atakujący nie może dołączyć <script>tagów, ale może dołączyć <style>tagi lub style=parametr w tagu? Wtedy może być w stanie zmienić wygląd strony w taki sposób, że jesteś zmuszony kliknąć niewłaściwy przycisk lub inny problem. Jest to o wiele mniej niepokojące, ale wciąż jest coś, czego należy unikać, a CSP robi to za Ciebie.

Dobrym źródłem do testowania witryny pod kątem CSP jest https://securityheaders.io/

Możesz przeczytać więcej o CSP na: http://www.html5rocks.com/en/tutorials/security/content-security-policy/

0xdabbad00
źródło
Czy możesz wyjaśnić coś więcej?
Dmitrij Manannikow
8
Dotyczy to w szczególności unsafe-inlinepolityki. Polityka ta umożliwia ograniczenie elementu stylu <style>nie do stylów inline stosowanych do atrybutu stylu elementu za: <div style="">. Ponieważ powyższe pytanie odnosi się do atrybutu stylu, wydaje się to złą radą, aby całkowicie unikać stylów wbudowanych. Ponadto reactzaleca się przeniesienie całego CSS do JS: github.com/reactjs/react-future/blob/master/04%20-%20Layout/…
potench
1
@potench ten link był naprawdę świetny, być może wart własnej odpowiedzi
eye_mew
6
Niestety odpowiedź @eye_mew i @ Sam-Rad - @potench jest nieprawidłowa. CSP unsafe-inlinewyłącza wszystkie formy stylów wbudowanych, w tym w atrybucie style. Możesz programowo używać interfejsów API stylu na elemencie za pomocą JS (np. elem.style.color = 'blue';), Ale nie możesz ustawić atrybutu stylu na elemencie (tak jak 'unsafe-inline'w dyrektywie script-src nie zezwala na wbudowane znaczniki skryptu, ale także onclickatrybuty i znajomych.)
Alex Sexton,
2
Więcej informacji od zespołu Facebooka na temat stosowania stylów w odniesieniu do CSP w React v15 github.com/facebook/react/issues/5878 . Warto przeczytać
Mark Lundin
2

W porównaniu do pisania stylów w pliku css, atrybut stylu React ma następujące zalety :

  1. Możliwość korzystania z narzędzi javascript jako języka programowania zapewnia kontrolę nad stylem elementów. Obejmuje to osadzanie zmiennych, używanie warunków i przekazywanie stylów do komponentu potomnego.
  2. Podejście „elementarne”. Nigdy więcej rozdzielania kodu HTML, JS i CSS napisanego dla komponentu. Kod komponentu jest skonsolidowany i zapisany w jednym miejscu.

Jednak atrybut stylu React ma kilka wad - nie możesz

  1. Nie można używać zapytań o media
  2. Nie można używać pseudo selektorów,
  3. mniej wydajny w porównaniu do klas CSS.

Używając CSS w JS, możesz uzyskać wszystkie zalety tagu stylu, bez tych wad . Na dzień dzisiejszy istnieje kilka popularnych, dobrze obsługiwanych css w bibliotekach js, w tym: Emotion, Styled-Components i Radium. Te biblioteki mają css, czym jest React dla HTML. Pozwalają Ci pisać CSS i kontrolować CSS w kodzie JS.

porównajmy, jak nasz kod będzie wyglądał na stylizację prostego elementu. Zmodyfikujemy styl „hello world”, aby był duży na komputerze, a mniejszy na telefonie komórkowym.

Korzystanie z atrybutu stylu

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

Ponieważ zapytanie o media nie jest możliwe w tagu stylu, będziemy musieli dodać nazwę elementu do elementu i dodać regułę css.

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

Za pomocą tagu 10 css Emotion

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

Emotion obsługuje również ciągi szablonów, a także komponenty w stylu. Więc jeśli wolisz, możesz napisać:

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

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

Za „Css in JS” używa klas css. Emocje zostały opracowane specjalnie z myślą o wydajności i wykorzystują buforowanie. W porównaniu z atrybutami stylu React, Css w JS zapewni lepszą wydajność.

Najlepsze praktyki

Oto kilka najlepszych praktyk, które polecam:

  1. Jeśli chcesz stylizować elementy w tekście lub w JS, użyj biblioteki css-in-js, nie używaj atrybutu style.

Czy powinienem dążyć do stylizacji w ten sposób i nie mieć żadnych stylów określonych w moim pliku CSS?

  1. Jeśli używasz rozwiązania css-in-js, nie ma potrzeby pisania stylów w plikach CSS. Pisanie css w JS jest lepsze, ponieważ możesz używać wszystkich narzędzi języka programowania, jak zapewnia JS.

czy powinienem całkowicie unikać stylów wbudowanych?

  1. Strukturyzacja kodu stylu w JS jest bardzo podobna do ogólnej struktury kodu. Na przykład:
    • rozpoznawaj powtarzające się style i pisz je w jednym miejscu. Istnieją dwa sposoby, aby to zrobić w 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>
   )
}
  • Wzorzec kodowania React składa się z enkapsulowanych komponentów - HTML i JS, które kontrolują komponent, są zapisane w jednym pliku. To jest miejsce, w którym należy twój kod css / style do stylu tego komponentu.

  • W razie potrzeby dodaj rekwizyt do stylizacji do swojego komponentu. W ten sposób możesz ponownie użyć kodu i stylu zapisanego w komponencie potomnym, a także dostosować go do własnych potrzeb przez komponent macierzysty.

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>
)
Ben Carp
źródło
2

Możesz także używać StrCSS, tworzy izolowane nazwy klas i wiele więcej! Przykładowy kod wyglądałby. Możesz (opcjonalnie) zainstalować rozszerzenie VSCode z Visual Studio Marketplace w celu obsługi podświetlania składni!

źródło: 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>;
  }
}
Jeffrey Lanters
źródło
1

Czasami potrzebujemy stylizować jakiś element z komponentu, ale jeśli musimy wyświetlić ten komponent tylko te, lub styl jest o wiele mniej, niż zamiast używać klasy CSS, wybieramy styl wbudowany w reakcji js. styl wbudowany reagjs jest taki sam jak styl wbudowany HTML, tylko nazwy właściwości są nieco inne

Napisz swój styl w dowolnym tagu, używając 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;
ABHIJEET KHIRE
źródło
Czy możesz dodać więcej informacji o tym, jak i dlaczego ten kod stanowi odpowiedź na pytanie OP? Dziękuję Ci!
deHaar
1

Aktualizacja 2020: najlepszą praktyką jest korzystanie z biblioteki, która wykonała już ciężką pracę za Ciebie i nie zabija twojego zespołu, gdy dokonasz zmiany, jak wskazano w pierwotnie zaakceptowanej odpowiedzi w tym filmie (nadal jest aktualna). Jest to bardzo pomocna tabela, aby zorientować się w trendach . Po przeprowadzeniu własnych badań nad tym postanowiłem wykorzystać Emotion do moich nowych projektów i okazało się ono bardzo elastyczne i skalowalne.

Biorąc pod uwagę, że zalecana jest najbardziej pozytywna odpowiedź z 2015 r Radium, które obecnie zostało przeniesione do trybu konserwacji . Wydaje się więc rozsądne dodanie listy alternatyw. Po odstawieniu Radium sugeruje kilka bibliotek. Każda z podlinkowanych stron ma przykłady łatwo dostępne, więc powstrzymam się od kopiowania i wklejania kodu tutaj.

  • Emocje, które są „inspirowane” między innymi stylizowanymi komponentami , wykorzystują style w js i mogą być niezależne od frameworka, ale zdecydowanie promują bibliotekę React. Emocje były aktualizowane od tego postu.
  • stylizowane elementy są porównywalne i oferują wiele takich samych funkcji jak Emotion. Również aktywnie utrzymywany. Składniki Emotion i styled mają podobną składnię. Jest zbudowany specjalnie do pracy z komponentami React.
  • JSS Kolejna opcja dla stylów w js, która jest niezależna od frameworka, chociaż ma wiele pakietów frameworka, w tym React-JSS.
SamsonTheBrave
źródło
0

W każdym razie wbudowane css nigdy nie jest zalecane. W naszym projekcie wykorzystującym stylizowane komponenty wykorzystaliśmy JSS. Chroni przesłonięcie css przez dodanie dynamicznych nazw klas w komponentach. Możesz także dodać wartości css na podstawie przekazanych rekwizytów.

Shivang Gupta
źródło