【发布时间】：2021-08-16 00:28:39
【问题描述】：
样式，特别是行样式，在 CDN 上使用 css 与我从本地安装 react-bootstrap 和 bootstrap 获得的 scss 或 css 不同。我想使用 SCSS 样式，以便能够从重命名变量等中受益。
SCSS（我想用什么，但不是我想要的样子）
我正在使用 Create-React-App。以下是文件：
package.json
{
"name": "tire-fill-tool",
"version": "0.1.0",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^5.11.4",
"@testing-library/react": "^11.2.7",
"@testing-library/user-event": "^12.1.10",
"bootstrap": "^5.0.1",
"formik": "^2.2.7",
"node-sass": "^6.0.0",
"react": "^17.0.2",
"react-bootstrap": "^1.6.0",
"react-dom": "^17.0.2",
"react-scripts": "4.0.3",
"web-vitals": "^1.0.1",
"yup": "^0.32.9"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"babel": {
"presets": [
[
"@babel/preset-env",
{
"targets": {
"node": "current"
}
}
]
]
},
"jest": {
"transform": {
"^.+\\.js?$": "babel-jest"
}
},
"devDependencies": {
"@babel/preset-env": "^7.14.2",
"react-test-renderer": "^17.0.2"
}
}
index.scss
@import "~bootstrap/scss/bootstrap";
index.js
import "./index.scss";
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<!--
manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>Metric Tire Size</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!-- <link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css"
integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l"
crossorigin="anonymous"
/>
-->
<script
src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"
></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"
integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ"
crossorigin="anonymous"
></script>
<script
src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"
integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm"
crossorigin="anonymous"
></script>
</body>
</html>轮胎填充工具.js
import Col from "react-bootstrap/Col";
import Container from "react-bootstrap/Container";
import Button from "react-bootstrap/Button";
import Form from "react-bootstrap/Form";
import { useState } from "react";
import { Formik } from "formik";
import * as Yup from "yup";
import Data from "./data";
import Jumbotron from "react-bootstrap/Jumbotron";
const TIRE_PLY_STMT = "Choose Tire Ply...";
function TireFillTool() {
const tireSizeDatabase = JSON.parse(JSON.stringify(Data));
const [tireData, setTireData] = useState(undefined);
const dataSchema = Yup.object().shape({
metric: Yup.object({
firstNum: Yup.number()
.typeError("Please only enter digits")
.moreThan(0, "Please enter a number greater than 0")
.required("Required"),
secNum: Yup.number()
.typeError("Please only enter digits")
.moreThan(0, "Please enter a number greater than 0")
.required("Required"),
thirdNum: Yup.number()
.typeError("Please only enter digits")
.moreThan(0, "Please enter a number greater than 0")
.required("Required"),
symbol: Yup.string()
.notOneOf([TIRE_PLY_STMT], "Please select an option")
.required("Please select an option"),
}),
});
return (
<Container fluid="sm">
<Formik
initialValues={{
metric: {
firstNum: "",
secNum: "",
thirdNum: "",
symbol: TIRE_PLY_STMT,
},
}}
validationSchema={dataSchema}
// validate={(values) => {
// const errors = {};
// if (!values.metric.firstNum) {
// errors.metric.firstNum = "Required";
// }
// return errors;
// }}
onSubmit={(values, { setSubmitting }) => {
const newVals = tireSizeDatabase.metric.filter(
isSameTireSize(values)
);
const avgGals = Math.round(
newVals.reduce((sum, e) => sum + Number(e.galsBallast), 0) /
newVals.length
);
setTireData({
tireSize: `${values.metric.firstNum}/${values.metric.secNum}${values.metric.symbol}${values.metric.thirdNum}`,
gals: avgGals,
});
setSubmitting(false);
}}
>
{({
values,
errors,
touched,
handleChange,
handleBlur,
handleSubmit,
isSubmitting,
}) => (
<div>
<h1 className="pt-4">Metric Tire Size</h1>
<Form noValidate onSubmit={handleSubmit}>
<Form.Row>
<Form.Group as={Col} controlId="firstMetricNumber">
<Form.Control
placeholder="Tire Width (mm)"
name="metric.firstNum"
onBlur={handleBlur}
onChange={handleChange}
value={values.metric.firstNum}
isInvalid={
errors.metric?.firstNum && touched.metric?.firstNum
}
/>
{/* <Form.Control.Feedback type="invalid">
{errors.metric?.thirdNum}s
</Form.Control.Feedback> */}
</Form.Group>
<h3 className="ml-2 mr-2">/</h3>
<Form.Group as={Col} controlId="secondMetricNumber">
<Form.Control
placeholder="Aspect Ratio"
name="metric.secNum"
onBlur={handleBlur}
onChange={handleChange}
value={values.metric.secNum}
isInvalid={errors.metric?.secNum && touched.metric?.secNum}
/>
<Form.Control.Feedback type="invalid">
{errors.metric?.secNum}
</Form.Control.Feedback>
</Form.Group>
<Form.Group as={Col} controlId="formGridState">
<Form.Control
as="select"
// defaultValue={"Choose..."}
name="metric.symbol"
onBlur={handleBlur}
onChange={handleChange}
value={values.metric.symbol}
// isInvalid={errors.metric?.symbol && touched.metric?.symbol}
isInvalid={errors.metric?.symbol && touched.metric?.symbol}
custom
>
<option>{TIRE_PLY_STMT}</option>
<option>-</option>
<option>R</option>
<option>B</option>
<option>D</option>
</Form.Control>
<Form.Control.Feedback type="invalid">
{errors.metric?.symbol}
</Form.Control.Feedback>
</Form.Group>
<Form.Group as={Col} controlId="thirdMetricNumber">
<Form.Control
placeholder="Rim Diameter (in.)"
name="metric.thirdNum"
onBlur={handleBlur}
onChange={handleChange}
value={values.metric.thirdNum}
isInvalid={
errors.metric?.thirdNum && touched.metric?.thirdNum
}
/>
{errors.metric?.thirdNum && touched.metric?.thirdNum ? (
<Form.Control.Feedback type="invalid">
{errors.metric?.thirdNum}
</Form.Control.Feedback>
) : (
<Form.Control.Feedback>a</Form.Control.Feedback>
)}
</Form.Group>
</Form.Row>
<Form.Row className="justify-content-center">
<Button bsClass="xyz" type="submit" disabled={isSubmitting}>
Calculate Gallons
</Button>
</Form.Row>
{tireData?.gals ? (
<Jumbotron className="mt-3">
<h1>{tireData.gals} gallons</h1>
On average {tireData.gals} gallons of Beet Juice will fill a
{tireData.tireSize} tire approximately 75% full
<p>
Did you know that Beet Juice is freeze resistant to -35° F,
non-toxic, biodegradable, water soluble, <i>and</i> animal
food grade safe?
</p>
<Button
href="https://www.google.com"
target="_blank"
rel="noopener noreferrer"
>
Find Your Nearest Beet Juice Dealer
</Button>
</Jumbotron>
) : (
<div></div>
)}
</Form>
</div>
)}
</Formik>
</Container>
);
}谢谢！
【问题讨论】：
标签： javascript css reactjs sass react-bootstrap