React-router-dom подключение стилей css?

Question

[ohio_land]

Приветствую участников Тостера!
Вобщем делаю, что-то вроде сервиса статистики, все просто - выборка значений из базы и представление их в удобочитаемом виде. В начале у меня был рендеринг чисто на бекэнде(https://bottlepy.org), а на фронтенде максимум что подключалось это - jQuery.
Сейчас решил переписать и сделать на реакте полностью изоморфное приложение, с применением react-router-dom, ради эксперимента.
К сути вопроса. Имеем приложение из трех страниц:

<Switch>
      <Route exact path='/' component={Home}/>
      <Route path='/aboutus' component={AboutUs}/>
      <Route path='/contacts' component={Contacts}/>
    </Switch>

Каким образом подключать стили для каждой страницы? Сразу приходит в голову в самом компоненте рендерить тег "link" c путем до файла css, соответсвенно:

<link rel="stylesheet" type="text/css" href="/css/home.css" />
	  <link rel="stylesheet" type="text/css" href="/css/aboutus.css" />
	  <link rel="stylesheet" type="text/css" href="/css/contacts.css" />

можно ли использовать тег link в body или он только для header?

Answer 1

[Роман Александрович]

вы можете поместить каждый ccs рядом с необходимым компонентом и импортировать
import ".css"

или вот так

.red {
  font-size: 25px;
  background-color: red;
  color: white;
}

import React from 'react'
import btn from './styles.css'

export default class CoolButton extends React.Component {
  render() {
    return (
      <button className={btn.red}>{this.props.text}</button>
    )
  }
}

Comments

[ohio_land]

Так просто? :). Благодарю за развернутый ответ!

Answer 2

[ohio_land]

А, то-есть описывать стили в контексте jsx, как компонент реакта? Роман Александрович не могли бы вы привести наглядный пример стилевого компонента и использования его в клиентском коде?

Comments

[Роман Александрович]

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

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


    render() {
        return (
            <div>
                <div style={mainDiv}>
                    <img src="./img/da-systems.png" alt="" style={imageWidthHeight}/>
                  
                    <div style={styles.myWidth}>
                        <Checkbox
                            label="Gegevens onthouden"
                            style={styles.checkbox}
                            onCheck={this.rememberMe.bind(this)}
                            checked={this.state.rememberMe}
                        />
                    </div>
                    <RaisedButton label="LOG IN" primary={true} fullWidth={true} onClick={this.logIn.bind(this)}/>
                </div>

                <Snackbar
                    open={this.state.open}
                    message="Geen netwerkverbinding"
                    autoHideDuration={4000}
                    onRequestClose={this.handleRequestClose}
                />
            </div>
        )
    }
}

const styles = {
    block: {
        maxWidth: 250,
    },
    checkbox: {
        marginBottom: 16,
        width: '100%',
    },
    div: {
        display: 'flex',
        flexDirection: 'column',
        padding: 20,
        width: '100%',
    },
    paperLeft: {
        flex: 1,
        height: '100%',
        margin: 10,
        textAlign: 'center',
        padding: 10
    },
    paperRight: {
        height: 600,
        flex: 4,
        margin: 10,
        textAlign: 'center',
    },
    myWidth: {
        width: '100%',
        display: 'flex',
        marginTop: '15px',
        marginBottom: '15px',

    }

};

const imageWidthHeight = {
    marginTop:'25px',
    maxWidth: '130px',
}
const mainDiv = {
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center',
    marginLeft: '25px',
    marginRight: '25px',
}


export default Login

[ohio_land]

Я так понимаю что здесь и препроцессоры (SASS, LESS) не нужны, если можно конструировать стили при помощи JavaScript

[ohio_land]

Поторопился я с выводами что SASS не нужен, если к примеру использовать css-библиотеку bootstrap, то очень даже нужен. В итоге пришел к решению компилить стили в один бандл со всех страниц и его уже подключать статически в шаблоне который отдает бекэнд, все равно он вызывается браузером единожды.

Answer 3

[Frimko]

а не лучше просто использовать styled?
Вы и модульность сохраните, и пересекаться классы никак не смогу(после правок в 3 ночи)