React 컴포넌트에 CSS와 스타일링을 적용하는 방법
지금까지 제가 작성한 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" /> 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"> </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's 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"));
질문을 처음 읽어보면 웹 페이지를 'React-ify' 했을 때 기존 CSS가 작동하지 않는 것처럼 보입니다.
그래야지.
그렇지 않은 경우, 복구하기 위해 추가 진단이 필요한 다른 문제가 있습니다.저는 최근에 React에서 프로젝트 중 하나를 다시 작성했고, 계속해서 똑같은 CSS 파일을 사용했고, 모든 것이 잘 작동했습니다.
하지만 최선의 방법을 묻는다면...
다른 사람들이 말했듯이, React는 인라인 스타일을 선호한다.
하지만, 나는 그렇지 않다.그것은 지저분하고, 바꾸기가 어려울 수 있고, 쉽게 다루기 어려워진다.
SCSS 또는 LESS는 리액트 스타일링에 가장 적합합니다.
하지만 왜 그랬을까?몇 가지 이유는 다음과 같습니다.
CSS는 재사용 가능
리액트 방식으로 인라인 스타일링을 하면 몇 가지 컴포넌트에 매우 적합합니다.
하지만 컴포넌트가 쌓이기 시작하면 같은 스타일을 계속 사용하고 있다는 것을 깨닫기 시작합니다.안 좋아.
변경하기 쉽다
컴포넌트에 업데이트된 스타일이 필요한 경우 올바른 컴포넌트(또는 상위 컴포넌트)를 찾아 수정하기 위해 더 이상 React 코드를 검색할 필요가 없습니다.
대신 평소처럼 CSS를 사용합니다.
덮어쓸 염려 없음
CSS의 캐스케이드 부분에서는 인라인 스타일이 최종 정지입니다.그들은 모든 것을 덮어씁니다.
처음에는 구현하고 있는 스타일에 대한 훌륭한 솔루션처럼 들리지만, 팜플렛 웹 사이트에서는 괜찮을 것 같습니다.그러나 더 큰 애플리케이션을 사용하기 시작하면 문제 해결이 거의 불가능한 문제에 직면하게 됩니다.
CSS의 캐스케이드 부분과 싸우는 대신 CSS를 사용하여 작업하고 스타일을 그대로 유지하십시오.
어디에서나 SCSS를 사용할 수 있는
가장 큰 포인트는 리액트에서 일하고 있고 인라인 스타일을 선호한다면 잘 작동할 수 있다는 것입니다.
하지만 다른 프레임워크로 이동하면 어떻게 될까요?갑자기 인라인 스타일은 잘 작동하지 않고, 다른 사람들과 함께 '일반' CSS를 쓰는 것으로 돌아옵니다.그렇다면 왜 하나의 프레임워크만을 위해 모든 것을 바꿀까요?
React에서 풀타임으로 일하고 새로운 베스트 프랙티스를 실험하는 것은 이해하지만, 대부분의 경우 한 모델의 자동차에서만 휠을 사용할 수 있는 상황에서 휠을 다시 발명하는 것은 의미가 없습니다.
구분하고 는 이렇게 수 요..scss스타일링 중인 특정 컴포넌트의 파일을 작성한 후 컴포넌트 파일로 Import합니다.
예:
폴더 구조:
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;
}
그러면 해당 구성요소에 포함된 스타일이 유지됩니다.
"CSS" 에 CSS 를 할 수 .<head>「CSS」의 CSS.가 같은한(React 컴포넌트가 적용되는 것은 ).className, 그냥class가 동작합니다.
보다 현대적이고 Javascript 지향적인 것을 찾고 있다면 CSS 모듈을 살펴보고 자세한 내용은 여기를 참조하십시오.
https://css-tricks.com/css-modules-part-1-need/
두 번째 접근법에는 분명히 더 많은 학습 곡선이 있습니다.
Vijay가 언급했듯이 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" /> 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} > </div>
<button type="button">Cart</button>
</div>
</div>
</div>
</div>
);
}
});
Sass를 사용하면 HTML과 동일한 시각적 계층에 따라 CSS 셀렉터를 네스트할 수 있습니다.과도하게 중첩된 규칙은 유지보수가 어려울 수 있으며 일반적으로 잘못된 관행으로 간주되는 과잉 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 {}
}
우선 css 파일 또는 scss 파일을 Import해야 합니다.다음과 같은 직접 경로로 Import를 권장합니다.
import "components/card/card";
이 작업을 수행하려면 프로젝트에서 SAS 로더와 웹 팩을 실행해야 합니다.
webpack.config에는 sass 로더가 필요합니다.
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",
로더는 Windows를 사용하기 위한 회피책이 필요합니다.Mac에서는 정상적으로 동작합니다.
폴더에 숨김 파일을 표시합니다.
'user/appData' 폴더로 이동합니다. 폴더는 다음 위치에 있어야 합니다: C:\Users\user\AppData\로밍\npm
Windows 환경변수를 추가합니다.NODE_PATH C:\Users\User\AppData\로밍\npm\nodeModules
npm install -g 명령어를 실행합니다.
명령 프롬프트를 닫았다가 다시 엽니다.
이것으로 sass를 로드하여 웹 팩으로 컴파일 할 수 있습니다.리액션과 함께 사용하는 것을 추천합니다.정말 파워풀합니다.
웹 팩을 사용하지 않는 경우는, http://webpack.github.io/docs/tutorials/getting-started/ 를 참조해 주세요.
여기서 웹 팩 빌드 프로세스의 예를 확인할 수 있습니다.Webpack bundle.js와 벤더가 되는 이유다발. 엄청 커요?
나는 Sass를 하고 있습니다.(.scss)React 컴포넌트를 스타일링합니다.PostCSS도 사용해 보았습니다.또한 모듈화 되어 있습니다.워크플로우를 통해 설정되면(Webpack을 사용합니다), React 앱을 스타일링하기 위해 필요한 것은style.scss(네,.scssImport한 부분 등이 포함되어 있습니다.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')
);
저는 리액트 프로젝트에서 CSS를 사용하지 않습니다.
라이브러리가 있습니다.SPA 스타일링을 보다 쉽고 쉽게 할 수 있는 테마입니다.
첫 번째 단계:
인스톨
npm i themeor
두 번째 단계:
'테마'에서 테마 또는 요소 가져오기
import React from 'react'
import theme from './theme-light.json' // here is your config file
import darkTheme from './theme-dark.json' // if you set 'darkConfig' prop, the dark theme on user's computer will be detected automatically
import {Theme, Box, Font, Line, Fit, Align, Gap} from 'themeor'
export default function App() {
return (
<Theme config={theme} darkConfig={darkTheme} reset>
<Font size="xl" weight="700">Imagine that I am your app</Font>
<Gap />
<Line fill="faint" />
<Gap />
<Align row gapHor="md" vert="center">
<Box fill="accent" strong>
<Gap vert="sm" hor="x2l">
<Font size="sm" weight="700" uppercase>Text #1</Font>
</Gap>
</Box>
<Line.TryTagless fill="critic">
<Box fill="critic" radius="max">
<Gap>
<Font fill="critic">Text #2</Font>
</Gap>
</Box>
</Line.TryTagless>
<Box fill="base" strong radius="md">
<Fit width="300px">
<Gap size="sm">
<Font underline align="center">Text #3</Font>
</Gap>
</Fit>
</Box>
</Align>
</Theme>
)
}
세 번째 단계:사용방법:
- 정렬
자녀의 정렬 및 조정 제어
import React from 'react'
import {Align, Fit, Line, Gap} from 'themeor'
class AlignDemo extends React.Component {
render() {
return(
<Fit.TryTagless width="100%" height="200px">
<Line.TryTagless>
<Align vert="center" hor="center">
<Fit cover="parent">Parent</Fit>
<Line><Gap>Child</Gap></Line>
</Align>
</Line.TryTagless>
</Fit.TryTagless>
)
}
}
다른 소품을 사용하여 원하는 대로 어린이 정렬 위치를 조정할 수 있습니다.그러나 이 예에서는 다음 대신 단순한 소품 '중앙'을 사용할 수 있습니다.
.button_class:{position:'flex',
flexDirection:'column'
justifyContent:'center'
}
소품 전체 정렬 설명은 여기에 있습니다.
- 박스
배경, 테두리 반지름, 상자 그림자, 배경 이미지 등이 있는 직사각형을 그려야 하는 경우.
<Box fill="accent" strong radius="md">
<Gap><Font align="center">Medium Radius</Font></Gap>
</Box>
채우기 - 상자의 배경입니다.모든 색상은 7가지 패밀리(기본, 희미, 액센트, 보완, 비평가, 경고, 성공)로 구분되며, 강하거나 약하거나(밝고 포화 상태, 거의 구별되지 않음) 할 수 있습니다.다음과 같이 구성 색상을 설정할 수 있습니다.
{
"fill": {
"base": {
"strong": "#000",
"weak": "#fff"
},
"faint": {
"strong": "#8994A6",
"weak": "#F6F8FB",
},
"accent": {
"strong": "#1273F3",
"weak": "#EBF4FF",
},
"complement": {
"strong": "#8889E2",
"weak": "#EEECFD"
},
"critic": {
"strong": "#F74545",
"weak": "#FDEDED"
},
"warning": {
"strong": "#E1922D",
"weak": "#FCEBCF"
},
"success": {
"strong": "#27AE60",
"weak": "#DEF8E9"
}
}
}
예시와 자세한 설명을 포함한 풀컬러 설명은 여기를 클릭해 주세요.
모든 컴포넌트 치수는 의류 치수와 동일합니다('s'부터 시작해서 'x3l'로 끝남).모든 구성이 여기에 있습니다.
- 폰트
모든 텍스트 파라미터를 제어합니다.색상, 크기, 글자 간격, 무게 등
텍스트가 컨피규레이션에서 강력한 배경에 배치되면 텍스트가 자동으로 반전됩니다(강력에서 약으로 전환됩니다.teme Context.shallInverseOn
예:
import React from 'react'
import {Font, Align} from 'themeor'
class FontDemo extends React.Component {
render() {
return(
<Align pattern="1fr 1fr 1fr">
<Font fill='base' weight="700" align="center">Bold Text</Font>
<Font fill='accent' underline align="center">Underlined Text</Font>
<Font fill='error' uppercase align="center">Uppercased Text</Font>
</Align>
)
}
}
- 선
테두리를 포함한 모든 선을 제어합니다.
- 아이콘
아이콘의 색상과 크기를 제어합니다.
첫 번째 단계 - 아이콘을 준비하여 테마에 전달해야 합니다.
import React from 'react'
import {Theme} from 'themeor'
// Import SVG
import ReactComponent as placeholder from './placeholder.svg'
import ReactComponent as bell from './bell.svg'
import ReactComponent as search from './search.svg'
// Form an object for medium size icons
const md = {placeholder, bell, search}
// Form an object to pass it to the Theme component
// Can contain keys according to the Scale (from x3s to x3l)
// If you use the same icons for different sizes, you can duplicate them
const iconSet = {xs: md, sm: md, lg: md, xl: md}
class App extends React.Component {
render() {
return (
<Theme icons={iconSet}>
Your app
</Theme>
)
}
}
그런 다음 Icon 컴포넌트를 호출해야 합니다.
import React from 'react'
import {Icon, Align} from 'themeor'
class IconDemo extends React.Component {
render() {
return(
<Align row gapHor="lg" vert="center">
<Icon />
<Icon name="bell" fill="accent" size="lg" />
<Icon name="search" fill="critic" size="xl" />
</Align>
)
}
}
'placeholder'는 기본 이름으로 사용됩니다.
언급URL : https://stackoverflow.com/questions/38545219/how-to-apply-css-and-styling-to-a-react-component
'programing' 카테고리의 다른 글
| 스프링 부트 화이트 라벨 삭제 오류 페이지 (0) | 2023.03.18 |
|---|---|
| AngularJS는 컨트롤러에서 형식이 유효한지 확인합니다. (0) | 2023.03.18 |
| 파일 이름이 대/소문자가 같은 상대 경로에서 이미 포함된 파일 이름과 다릅니다. (0) | 2023.03.18 |
| 맥락.Context에 의해 전달된 값에 액세스하기 위한 Consumer vs useContext().프로바이더 (0) | 2023.03.18 |
| 문의 양식 7에 get request를 사용하여 필드 값 설정 (0) | 2023.03.13 |