我有 2 个不同的页面和 2 个不同的 css(每个 html 页面一个(，如果我在其中之一中修改 .table{}，则 css 将应用于所有页面。我使用反应引导
我希望第 1 页中的一个表格宽度为 100%，第 2 页的表格宽度为 33.3%。
页2：
import React from 'react';
import Container from "react-bootstrap/Container";
import {Jumbotron} from "react-bootstrap";
import Row from "react-bootstrap/Row";
import Col from "react-bootstrap/Col";
import Image from "react-bootstrap/Image"
import ProgressBar from "react-bootstrap/ProgressBar"
import Table from "react-bootstrap/Table"
import './Doctor.css'
export default class Doctor extends React.Component {
constructor(props){
super(props);
this.state = {
items: [],
isLoaded: false,
}
}
componentDidMount() {
fetch('http://localhost:8000/api/doctorsList')
.then(res => res.json())
.then(json => {
this.setState({
isLoaded: true,
items: json,
})
});
}
render() {
var { isLoaded, items} = this.state;
if (!isLoaded){
return <div>Loading...</div>
}else {
return (
<Container>
<Jumbotron>
<h1 align="center">The Clinicum</h1>
</Jumbotron>
<Row>
{items.map(row =>(
<Col className={".column"} key={row.iddoctor}>
<Image src={require('./photos/dr1.jpg')} roundedCircle />
<p>Raiting:</p>
<ProgressBar>
<ProgressBar striped variant="success" now={70} key={1} label={"70%"} />
<ProgressBar striped variant="danger" now={30} key={2} label={"30%"} />
</ProgressBar>
<br/>
<Table striped bordered hover >
<tbody>
<tr>
<td>Name</td>
<td>{row.nume}</td>
</tr>
<tr>
<td>An absolvire</td>
<td>{row.anAbsolvire}</td>
</tr>
<tr>
<td>Specializare</td>
<td>{row.specializare}</td>
</tr>
<tr>
<td>Telefon</td>
<td>{row.photoLink}</td>
</tr>
</tbody>
</Table>
</Col>
))}
</Row>
</Container>
)};
}
}
页1：
import React, {Component} from 'react';
import { Link} from 'react-router-dom';
import {Jumbotron} from 'react-bootstrap';
import './Home.css';
import Container from "react-bootstrap/Container";
import Table from "react-bootstrap/Table";
import {Image} from "react-bootstrap";
class Home extends Component {
constructor(props){
super(props);
this.state = {
items: [],
isLoaded: false,
}
}
componentDidMount() {
fetch('http://localhost:8000/api/clinicList')
.then(res => res.json())
.then(json => {
this.setState({
isLoaded: true,
items: json,
})
});
}
render() {
var { isLoaded, items} = this.state;
if (!isLoaded){
return <div>Loading...</div>
}else {
return (
<Container>
<Jumbotron>
<h1 align="center">The Clinicum</h1>
</Jumbotron>
<Table className="table">
<thead>
<tr>
<th>Name</th>
<th>Locatie</th>
<th>Tip Unitate</th>
</tr>
</thead>
<tbody>
{items.map(row =>(
<tr key={row.idclinic}>
<td>
<Link to="/doctor">
<Image
src= {require(`./photos/${row.photoLink}.jpg`)}//{row.photoLink}
width="30"
height="30"
className="d-inline-block align-top"
alt={"aa"}
/>{row.name}
</Link>
</td>
<td>{row.locatie}</td>
<td>{row.tipUnitate}</td>
</tr>
))}
</tbody>
</Table>
</Container>
);
}
}
}
export default Home;
在家里.css我有
.table{
width: 100%;
}
在医生.css我有
.table{
width: 33.3%;
}
但在主页中，表格是 33.3%
React 不像 Angular 那样划分 CSS。一旦它加载到浏览器中，它就会应用于当前页面中的任何位置。在表上使用其他类来指定宽度。
更好的是，使用Bootstrap提供的网格(.col-xs-4 33%(。
导入语句的顺序将决定最后使用哪个 css 文件。 但是，在您的情况下，您只需添加另一个指向更改的标记即可。 例如，在这里你有一个表类名。 像这样添加另一块。
.table{
width: 100%;
border: 1px solid black
}
.home{
width: 33.3%
}
然后，在您的 JSX 中，您可以执行此操作。
<Table className='table home' />
现在，您的表格将具有边框以及主页宽度。 这是修改现有 css 的最简单方法。
这是
正常行为。你有两个同名的类，这意味着在 React 完成开发或生产环境的构建后，第二个类将覆盖第一个类，因为这就是 CSS 所做的。
有一个视图不同的选项供您确保不会发生这种情况：
- 定义内联样式
- 像这样使用 CSS-in-js 或像样式化组件这样的库
- 定义单独的 CSS 类名称(为此，我建议使用命名约定，这可以是您自己的、您的公司命名约定或类似 BEM 的东西(
就个人而言，我会选择命名约定 BEM。这可能如下所示：
.home__table {
width: 100%;
}
.doctor__table {
width: 33%;
}
但是，由于您使用的是 Bootstrap，因此您可能希望使用内联样式选项并使用 bootstrap 提供的 col 大小，如@isherwood建议的那样。