Как применить CSS и Styling к компоненту React

Я смотрел, однако, мне не повезло найти какой-либо способ создать файл React.js, который я создал, я преобразовал его со стандартной веб-страницы, поэтому у меня есть оригинальный CSS, однако я делаю не знаю, как использовать React для отображения страницы с правильным стилем.

Любая помощь будет оценена!

var NavBar = React.createClass({
  render: function() {
    return (
      /* NavBar */
      <div className="dark_bg_color">
        <img src="logo.png" />
        <div className="table_center">
          <div>
            <ul>
              <li>daily specials</li>
              <li>gift gallery</li>
              <li>events</li>
              <li><i className="fa fa-search" />&nbsp;search</li>
            </ul>
          </div>
        </div>
        <div className="right_nav">
          <div className="table_center">
            <div>
              <button type="button">Sign Up</button>
              <button type="button">Log In</button>
              <div className="vertical-line">&nbsp;</div>
              <button type="button">Cart</button>
            </div>
          </div>
        </div>
      </div>
    );
  }
});
ReactDOM.render(<NavBar />, document.getElementById('nav'));

var Gallery = React.createClass({
  render: function() {
    return (
      /* Gallery */
      <div >
        <div align="middle">
          <div id="head">
            <img id="pic" align="middle" max-width="100%" src="title_pic.png" />
            <div align="left" className="big">
              <div>
                <span>Dine with the Best</span>
                <div className="words">
                  <span>BonApp connects you with limited-time, exclusive meals and events offered by the city’s best chefs.<br /><br /><br /><button type="button">JOIN BONAPP</button></span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  }
});
ReactDOM.render(<Gallery />, document.getElementById("Gallery"));

var WhatsNew = React.createClass({
  render: function() {
    return (
      <div  className="dark_bg_color">
        <h2 style={{marginBottom: 30}}>
          <span>What New</span>
        </h2>
        <div className="autoplay">
          <img src="whatsnew0.png" />
          <img src="whatsnew1.png" />
          <img src="whatsnew0.png" />
        </div>
      </div>
    );
  }
});
ReactDOM.render(<WhatsNew />, document.getElementById("whatsnew"));

var BonEvents = React.createClass({
  render: function() {
    return (
      /* Events */
      <div id="events" className="dark_bg_color">
        <div className="box">
          <div className="box-text">
            <div className="horizontal-line" />
            <div><div className="horizontal-line" /><p>LES BON CADEAUX</p></div>
            <div className="horizontal-line" />
          </div>
        </div>
        <h2>
          <span>Bon Events</span>
        </h2>
        <div>
        </div>
      </div>
    );
  }
});
ReactDOM.render(<BonEvents />, document.getElementById("events"));

var IOS = React.createClass({
  render: function() {
    /* IOS */
    return (
      <div >
        <h2>
          <span />
        </h2>
      </div>
    );
  }
});
ReactDOM.render(<IOS />, document.getElementById("advertiseApp"));

var Footer = React.createClass({
  render: function() {
    return (
      /* Footer */
      <div>
        <div className="footer_center">
          <div>
            <ul>
              <li>ABOUT</li>
              <li>PRESS</li>
              <li>CONTACT</li>
              <li>SUPPORT</li>
              <li>BONAPP FOR RESTAURANTEURS</li>
            </ul>
          </div>
        </div>
        <div className="legal_center">
          <div>
            <ul>
              <li>Copyright © 2016 BonApp Dining Inc.</li>
              <li>Privacy Policy</li>
              <li>Legal</li>
            </ul>
          </div>
        </div>
      </div>
    );
  }
});
ReactDOM.render(<Footer />, document.getElementById("footer"));

Ответы

Ответ 1

Сначала прочитайте свой вопрос, так как кажется, что ваш существующий CSS не работает, когда вы "React-ify" на своей веб-странице.

Это должно быть.

Если это не так, произойдет что-то еще, что потребуется для дальнейшего диагностирования. Недавно я переписал один из моих проектов в React и продолжал использовать тот же самый CSS файл, и все отлично работало.

Однако, если вы спрашиваете о наилучшем способе для этого...

Как говорили другие, React предпочитает встроенные стили.

Однако я этого не делаю. Это беспорядочно, может быть трудно изменить, и легко становится громоздким.

SCSS или LESS - лучшие способы стиля в React.

Но почему? Вот несколько причин:

Ваш CSS многоразовый

Если вы встраиваете стиль с помощью метода React, он отлично работает для пары компонентов.

Но когда эти компоненты начинают складываться, вы начинаете понимать, что используете одни и те же стили снова и снова. Что отстой.

Легко сделать изменения

Когда компонент нуждается в обновленном стиле, вам больше не нужно копать код React, чтобы найти нужный компонент (или он был родительским компонентом?) и исправить его.

Вместо этого просто используйте CSS, как вы всегда использовали.

Вам не нужно беспокоиться о перезаписи

В каскадной части CSS стили встроены в конечную остановку. Они перезаписывают все.

Сначала это звучит как отличное решение для стилей, которые вы реализуете, и на веб-сайте брошюры, возможно, все будет хорошо. Но когда вы начинаете работать с более крупными приложениями, вы сталкиваетесь с проблемами, которые почти невозможно устранить.

Вместо того, чтобы сражаться с каскадной частью CSS, работайте с ним и держите свои стили в одном месте.

Вы используете SCSS и LESS Everywhere

Самый большой момент для меня - да, если вы работаете в React и предпочитаете встроенные стили, они могут отлично работать.

Но что происходит, когда вы переходите к любой другой структуре? Внезапно эти встроенные стили не работают так хорошо, и вы вернулись к написанию "нормального" CSS с остальными из нас. Так зачем менять вещи только для одной структуры?

Я понимаю, что если вы работаете в React full-time, и имеет смысл экспериментировать с новыми передовыми методами, но для большинства из нас нет смысла повторно изобретать колесо, когда вы можете использовать это колесо одна модель автомобиля.

Ответ 2

Если вы хотите, чтобы вещи были разделены, вы можете создать файл .scss для конкретного компонента, который вы ставили, а затем импортировать в свой файл компонента.

Пример:

Структура папки:

components
|
|--Card
   |
   |--Card.js
   |--Card.scss
   |--index.js
|--Some Other Component Folder

Card.js:

import React, { Component } from 'react';
import classes from './Card.scss';

export class Card extends Component {

    render () {
        return (
            <div className={`${classes.layout} col`}>
                <div className={`${classes.card} card`}>
                    <div className="card-image">
                        <ProviderImage />
                    </div>
                </div>
            </div>
        );
    }
}

export default Card;

Card.scss:

.layout {
    img {
        display: block;
        max-width: 372px;
        max-height: 372px;
        height: auto;
        width: auto;
    }
}

.card {
    width: 370px;
    height: 550px;
}

Это сохраняет стили, содержащиеся в соответствующем компоненте.

Ответ 3

Технически вы можете добавить CSS в HTML-документ <head>, как это было бы с обычным файлом CSS. Пока ваши компоненты React имеют одни и те же классы (за исключением, очевидно, применяемого как className не просто class), тогда он будет работать.

Если вы ищете что-то более современное и ориентированное на Javascript, вы можете посмотреть в CSS-модули и узнать больше о них здесь:

https://css-tricks.com/css-modules-part-1-need/

Очевидно, что еще немного кривая обучения со вторым подходом.

Ответ 4

Как упоминал Виджай, React предпочитает встроенные стили.

Один общий шаблон для каждого компонента имеет единственный объект styles, который содержит все стили, используемые в этом компоненте, например:

var styles = {
  navBar: {
    backgroundColor: 'dark blue'
  },
  center: {
    textAlign: 'center'
  },
  rightNav: {
  },
  verticalLine: {
  },
};

var NavBar = React.createClass({
  render: function() {
    return (
      <div style={styles.navBar} >
        <img src="logo.png" />
        <div style={styles.center} >
          <div>
            <ul>
              <li>daily specials</li>
              <li>gift gallery</li>
              <li>events</li>
              <li><i className="fa fa-search" />&nbsp;search</li>
            </ul>
          </div>
        </div>
        <div style={styles.rightNav}>
          <div style={styles.center}>
            <div>
              <button type="button">Sign Up</button>
              <button type="button">Log In</button>
              <div style={styles.verticalLine} >&nbsp;</div>
              <button type="button">Cart</button>
            </div>
          </div>
        </div>
      </div>
    );
  }
});

Ответ 5

Я думаю, что в первую очередь вам нужно импортировать ваши файлы css или scss, я рекомендую сделать это прямому пути, например:

import "components/card/card";

Для этого вам нужно иметь в своем проекте загрузчики SASS и веб-пакет.

В вашем webpack.config вам нужны сассирующие загрузчики

  module: {
    loaders: [
      {test: /\.scss$/, loaders: ["style", "css", "sass"]},
      {test: /\.css$/, loader: ExtractTextPlugin.extract("style-loader", "css-loader")},
      {test   : /\.woff|\.woff2|\.svg|.eot|\.ttf|\.png/, loader : 'url?prefix=font/&limit=10000&name=/assets/fonts/[name].[ext]'
      }
    ]

Я воспользовался командой "sass-loader": "^3.0.0",

Загрузчик нуждается в обходном пути для работы с окнами, на Mac он отлично работает:

Отобразить скрытые файлы в папке.
Перейдите в папку "user/appData", она должна быть включена: C:\Users\user\AppData\Roaming\npm
Добавить переменную окружения окна: NODE_PATH C:\Users\пользователь\AppData\Roaming\НПМ\nodeModules
Запустите команду npm install -g
Закройте и снова откройте командную строку.

С этим вы можете загрузить sass и скомпилировать его с помощью webpack, и я рекомендую использовать его с реакцией, это действительно мощно.

Если ваш веб-пакет не usng вы можете найти здесь: http://webpack.github.io/docs/tutorials/getting-started/

И здесь вы можете проверить и пример процесса сборки webpack: Почему мои webpack bundle.js и vendor.bundle.js настолько невероятно большие?

Ответ 6

Sass позволит вам вкладывать ваши CSS-селекторы таким образом, чтобы следовать той же визуальной иерархии вашего HTML-кода. Имейте в виду, что чрезмерно вложенные правила приведут к чрезмерно квалифицированному CSS, который может оказаться сложным в обслуживании и обычно считается плохой практикой. Позвольте мне объяснить на примере.

Hero.jsx

import "./Hero.scss";

import React, { Component } from "react";

class Hero extends Component {
  render() {
    return (
      <div className="hero-component">
        <span className="hero-header">Scss is awsome.</span>
      </div>
    );
  }
}

export default Hero;

Hero.scss

.hero-component {
    .hero-header {
        <!-- Hero header style goes here -->
    }

    .other-class {}
}

Ответ 7

Я использую Sass (.scss) для стилизации моих компонентов React. Я также использовал PostCSS. И они также являются модульными. После того, как вы настроите свой рабочий процесс (я использую webpack), все, что вам нужно сделать, чтобы создать ваше приложение React, - это импортировать style.scss (да, .scss), который содержит ваши импортированные частичные файлы и т.д. В ваш index.js файл, который находится в корне вместе с основным App.js. Это то, где все остальное вам нужно для того, чтобы работать в вашем приложении. Например, это то, что мой взгляд выглядит для приложения React, над которым я сейчас работаю:

index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import 'core-js/es6/map';
import 'core-js/es6/set';
import App from './App';
import './favicon.ico';
import './style/style.scss';

ReactDOM.render(
    <App />, document.getElementById('root')
);