리액트 부트스트랩이 리액트 컴포넌트를 스타일링하지 않음
어제 리액트를 사용하기 시작했으니 데모 앱을 셋업해 주세요.환경:
- 타이프 스크립트
- 웹 팩
- 리액트 & 리액트 DOM
부트스트랩 스타일을 설정하려고 합니다.
이 튜토리얼을 따라갔지만 Typescript에 맞게 수정했습니다.
https://medium.com/@senglungtw/web-pack-with-b94d33765970
모든 것이 동작하며 페이지에 signin 폼이 표시되고 React-Bootstrap에 의해 부트스트랩 HTML이 출력됩니다.단, 스타일은 요소에 적용되지 않습니다.단, Bootstrap 스타일은 적용되지 않은 단순한 HTML 페이지입니다.설정에 없는 것이 무엇인지 잘 모르겠습니다.
webpack.config.syslog
튜토리얼에서 설명한 대로 npm을 통해 로더를 추가했지만 css에서 Typescript 모듈을 설정하도록 조정했습니다.
module.exports = {
entry: {
catalog: "./src/apps/CatalogApp.tsx",
auth: "./src/apps/AuthApp.tsx"
},
output: {
filename: "[name].bundle.js",
publicPath: "/build/",
path: __dirname + "/dist"
},
// Enable sourcemaps for debugging webpack's output.
devtool: "source-map",
resolve: {
// Add '.ts' and '.tsx' as resolvable extensions.
extensions: [".ts", ".tsx", ".js", ".json"]
},
module: {
rules: [
// All files with a '.ts' or '.tsx' extension will be handled by 'awesome-typescript-loader'.
{
test: /\.tsx?$/,
loader: "awesome-typescript-loader"
},
// All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'.
{
enforce: "pre",
test: /\.js$/,
loader: "source-map-loader"
},
// css loader
{
test: /\.css$/,
loader: "typings-for-css-modules-loader?modules"
},
{
test: /\.(woff|woff2)(\?v=\d+\.\d+\.\d+)?$/,
loader: 'url-loader?limit=10000&mimetype=application/font-woff'
},
{
test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
loader: 'url-loader?limit=10000&mimetype=application/octet-stream'
},
{
test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
loader: 'file-loader'
},
{
test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
loader: 'url-loader?limit=10000&mimetype=image/svg+xml'
}
]
},
// When importing a module whose path matches one of the following, just
// assume a corresponding global variable exists and use that instead.
// This is important because it allows us to avoid bundling all of our
// dependencies, which allows browsers to cache those libraries between builds.
externals: {
"react": "React",
"react-dom": "ReactDOM"
}
};
AuthApp.tsx
여기가 지원서의 시작점입니다.
import * as React from "react";
import * as ReactDOM from "react-dom";
import { SigninForm } from "../components/users/SigninForm";
import { MiniCart } from '../components/cart/MiniCart';
import { UserMenu } from '../components/users/UserMenu';
import * as bs from 'bootstrap/dist/css/bootstrap.css';
import * as bst from 'bootstrap/dist/css/bootstrap-theme.css';
if (document.getElementById("signin-form")) {
ReactDOM.render(
<SigninForm />,
document.getElementById("signin-form")
);
}
if (document.getElementById('cart')) {
ReactDOM.render(
<MiniCart />,
document.getElementById('cart')
);
}
if (document.getElementById('user-menu')) {
ReactDOM.render(
<UserMenu />,
document.getElementById('user-menu')
);
}
SigninForm.tsx
사인 폼의 관련 UI.
import * as React from 'react';
import * as ReactDOM from "react-dom";
import { Button, Col, Row } from 'react-bootstrap';
import { Spinner } from '../shared/Spinner';
interface SigninFormProps {
}
interface SigninFormState {
email: string;
password: string;
}
export class SigninForm extends React.Component<SigninFormProps, SigninFormState> {
constructor(props: SigninFormProps) {
super(props);
this.state = {
email: '',
password: ''
};
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleChange(event: any) {
this.setState({ [event.target.name]: event.target.value });
}
handleSubmit(event: any) {
event.preventDefault();
console.log('Submitting form', this.state);
}
render() {
return (
<Row>
<Col md={8}>
<form className="signin-form" onSubmit={this.handleSubmit}>
<div className="form-group">
<label htmlFor="email">Email</label>
<input id="email" name="email" type="email" value={this.state.email} onChange={this.handleChange} />
</div>
<div className="form-group">
<label htmlFor="password">Password</label>
<input id="password" name="password" type="password" value={this.state.password} onChange={this.handleChange} />
</div>
<Button>Submit</Button>
</form>
</Col>
<Col md={4}>
Right Side
</Col>
</Row>
);
}
}
저도 같은 문제에 부딪혔는데, 이 문제가 잘 해결되었습니다.-->
npm을 사용하여 부트스트랩을 설치했습니다.
- 1)
npm i --save bootstrap
그럼, 인index.js(여기서 App.js를 렌더링합니다) 다음과 같이 nodes_modules에서 부트스트랩의 최소화된 css 파일을 Import했습니다.
- 2)
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
이제 반응형 포지셔닝이 작동하게 되었습니다(예전에 봤던 것처럼).react-bootstrap올바른 클래스 이름을 렌더링하지만 스타일링은 렌더링하지 않습니다).
주의: https://react-bootstrap.github.io/getting-started/introduction 에서는 css를 의 선두에 추가할 필요가 있다고 합니다.index.html이런 식으로 하는 것은 성공하지 못했습니다.
첫 번째로 필요한 것은 NPM을 사용하여 부트스트랩을 설치하는 것입니다.
npm install --save bootstrap
그리고나서
부트스트랩을 사용할 필요가 있는 컴포넌트에 이 스테이트먼트를 쓰는 것을 추천합니다.내 경우는 이 스테이트먼트가 유효합니다.
import 'bootstrap/dist/css/bootstrap.css';
CSS 스타일링이 시작됩니다.:)
해피 코딩!
사용하고 있는 Web 팩의 설정은, 미디엄의 기사와는 조금 다릅니다.
중간 기사에서 저자는 다음과 같이 사용합니다.style-loader그리고.css-loader처리하다css파일.
module.exports = {
entry: './main.js',
output: { path: __dirname, filename: 'bundle.js' },
module: {
loaders: [
...
{
test: /\.css$/,
loader: "style-loader!css-loader"
},
...
]
},
};
style-loadercss 코드가 에 주입됩니다.<style/>태그. 그래서 튜토리얼은
웹 팩 구성에서는typings-for-css-modules-loadercss를 로드합니다.이 로더에서는 css 클래스 변수 이름을 에 전달해야 합니다.className.
즉, 다음과 같이 코드를 작성해야 합니다(일부 코드를 단순화).
import * as React from "react";
import * as bs from 'bootstrap/dist/css/bootstrap.css';
import * as bst from 'bootstrap/dist/css/bootstrap-theme.css';
import { Button, Col, Row } from 'react-bootstrap';
import { Spinner } from '../shared/Spinner';
export class SigninForm extends React.Component {
...
render() {
return (
<Row>
<Col md={8}>
<form className={bt["signin-form"]} onSubmit={this.handleSubmit}>
<div className={bt["form-group"]}>
<label htmlFor="email">Email</label>
<input id="email" name="email" type="email" value={this.state.email} onChange={this.handleChange} />
</div>
<Button>Submit</Button>
</form>
</Col>
<Col md={4}>
Right Side
</Col>
</Row>
);
}
}
통과하다bt[classname]로.className.
될 것 같아요.
그런데, 나는 다른 중간 크기의 기사를 찾았다.typings-for-css-modules-loader-> 링크.
저는 당신의 투고를 확인했습니다만, 이것이 관련이 있는지는 잘 모르겠습니다.단, 리액트 부트스트랩은 사용할 수 있습니다.react-bootstrap에 따라 다음 명령어를 추가해야 합니다.
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"
integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS"
crossorigin="anonymous"
/>
index.html 헤더 태그에 추가했습니다.
그리고 나는 덧붙였습니다.import "react-bootstrap/dist/react-bootstrap.min.js";「.model」입니다.
App.css만 하면 .
@import "bootstrap/dist/css/bootstrap.css";
이 행을 index.js에 추가해 보십시오.
import 'bootstrap/dist/css/bootstrap.min.css';
App.js 파일에 추가해도 소용없다
부트스트랩이 동작하려면 bootstrap.min.js와 함께 bootstrap.min.css를 사용해야 합니다.https://www.bootstrapcdn.com/에 접속하여 CSS 및 JavaScript 아래에 있는 링크를 복사하여 제목 태그 아래의 HTML 파일에 붙여넣습니다.
다음과 같이 사용하고 그에 따라 부트스트랩 버전을 변경합니다.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap**@5.1.1**/dist/css/bootstrap.min.css" crossorigin="anonymous"/>
<script src="https://cdn.jsdelivr.net/npm/bootstrap**@5.1.0**/dist/js/bootstrap.min.js" crossorigin="anonymous"></script>노드 v16.15.0 이후를 사용하고 있습니까?
다음 중 하나를 수행합니다.
- 요? 달려요?
yarn add react-bootstrap bootstrap - ? run-npm 사용? ★★★★★★★★★★★★★★★★★★-
npm install react-bootstrap bootstrap
- 이 행을 .js에 해 주세요.import 'bootstrap/dist/css/bootstrap.css';
그런 다음 리액트 앱을 다시 시작합니다.그 이후에는 작동해야 합니다.
React-Bootstrap의 공식 솔루션도 있습니다.
1 - 사용할 구성 요소를 가져옵니다.
import Button from 'react-bootstrap/Button';
이지 않은 경우
import { Button } from 'react-bootstrap';
2 - 컴포넌트의 스타일을 올바르게 적용하기 위해 필요한 스타일시트를 가져옵니다.
import 'bootstrap/dist/css/bootstrap.min.css';
페이지를 새로 고칩니다.이제 부트스트랩의 기본 스타일링이 올바르게 적용됩니다.
코드로 부트스트랩 라이브러리를 Import해야 합니다.
'bootstrap/dist/css/bootstrap.css' Import;
이 라이브러리를 앱에 Import합니다.
내 경우 이 작업은
언급URL : https://stackoverflow.com/questions/47354472/react-bootstrap-not-styling-my-react-components
'programing' 카테고리의 다른 글
| 속성에 경로를 지정하여 클래스 속성을 JSON의 하위 속성에 매핑할 수 있습니까? (0) | 2023.03.26 |
|---|---|
| 여러 메타 키로 주문하는 방법 (0) | 2023.03.26 |
| 버튼 텍스트를 한 줄에 표시 (0) | 2023.03.26 |
| 유닛 테스트에서 JSON을 사용하여 요청을 보내는 방법 (0) | 2023.03.26 |
| 워드프레스에 R 리플릿 맵을 삽입하다 (0) | 2023.03.26 |