Javascript “将样式添加到导入的零部件”为“反应”
我有一个独立的组件“通知”,它有自己的CSS样式。我想在标题组件中显示通知组件,但样式不同。我在标题中导入了组件,但无法在其上添加样式。请帮忙。我不想更改通知组件的本地样式,因为它破坏了通知功能 用于导入通知组件的代码Javascript “将样式添加到导入的零部件”为“反应”,javascript,reactjs,typescript,react-native,react-component,Javascript,Reactjs,Typescript,React Native,React Component,我有一个独立的组件“通知”,它有自己的CSS样式。我想在标题组件中显示通知组件,但样式不同。我在标题中导入了组件,但无法在其上添加样式。请帮忙。我不想更改通知组件的本地样式,因为它破坏了通知功能 用于导入通知组件的代码 import React from 'react'; import bell from '../../../assets/icons/bell.svg'; import NotificationList from '../notification/NotificationList
import React from 'react';
import bell from '../../../assets/icons/bell.svg';
import NotificationList from '../notification/NotificationList';
class Search extends React.Component{
constructor()
{
super()
this.state={
notificationStatus:false
}
}
render()
{
const style={
position:'absolute',
top:'70px',
left:'0px',
width:'100%',
height:'auto',
zindex:'2'
}
return(
<div className="col-md-8 col-sm-8">
<div className="row">
<div className="col-md-11 col-sm-11 search-container">
<input type="text" className="form-control" name="search" placeholder="Search" />
<i className="fa fa-search"></i>
</div>
<div className="col-md-1 col-sm-1 bell-container flex all-center relative">
<img src={bell} alt="bell icon" />
</div>
</div>
<NotificationList style={style} className="notification-component" />
</div>
)
}
}
export default Search;
从“React”导入React;
从“../../assets/icons/bell.svg”导入bell;
从“../notification/NotificationList”导入NotificationList;
类搜索扩展了React.Component{
构造函数()
{
超级()
这个州={
通知状态:false
}
}
render()
{
常量样式={
位置:'绝对',
顶部:'70px',
左:'0px',
宽度:'100%',
高度:'自动',
津德克斯:“2”
}
返回(
)
}
}
导出默认搜索;
通知列表组件
import React from 'react';
class NotificationList extends React.Component{
constructor(props)
{
super(props)
this.state={
}
}
render()
{
const title={
marginBottom:'0px'
}
return(
<div className="col-md-10 col-md-offsest-1 default-shadow offset-md-1 bg-white pd-10-0 border-radius-10">
<div className="row">
<div className="col-md-12 flex pd-10-0 notification-main-block">
<div className="col-md-11">
<p className="paragraph" style={title}>Notification title comes here.</p>
<p className="small-paragraph" style={title}>2 min ago</p>
</div>
</div>
<div className="col-md-12 flex pd-10-0 notification-main-block">
<div className="col-md-11">
<p className="paragraph" style={title}>Notification title comes here.</p>
<p className="small-paragraph" style={title}>2 min ago</p>
</div>
</div>
<div className="col-md-12 flex pd-10-0 notification-main-block">
<div className="col-md-11">
<p className="paragraph" style={title}>Notification title comes here.</p>
<p className="small-paragraph" style={title}>2 min ago</p>
</div>
</div>
</div>
</div>
)
}
}
export default NotificationList;
从“React”导入React;
类NotificationList扩展了React.Component{
建造师(道具)
{
超级(道具)
这个州={
}
}
render()
{
常数标题={
marginBottom:'0px'
}
返回(
通知标题出现在这里
2分钟前
通知标题出现在这里
2分钟前
通知标题出现在这里
2分钟前
)
}
}
导出默认通知列表;
我看到您已将样式道具包含在您的通知
组件中
<NotificationList style={style} className="notification-component" />
我强烈建议处理这种造型的东西。看看
编辑:
再读一遍,我发现你对风格有一点误解,
您可以在大多数基本html组件上应用样式,例如
div、span、section等。但是当涉及到组件时,样式实际上不会自动应用,它是特意设计的,样式将由您道具
。您必须再次应用它。我看到您已将样式道具包含在通知组件中
<NotificationList style={style} className="notification-component" />
我强烈建议处理这种造型的东西。看看
编辑:
再读一遍,我发现你对风格有一点误解,
您可以在大多数基本html组件上应用样式,例如div、span、section等。但是当涉及到组件时,样式实际上不会自动应用,它是特意设计的,样式将由您道具
。您必须再次应用它。您只通过了样式,但未在通知组件中使用
import React from 'react';
import bell from '../../../assets/icons/bell.svg';
import NotificationList from '../notification/NotificationList';
class Search extends React.Component{
constructor()
{
super()
this.state={
notificationStatus:false
}
}
render()
{
const style={
position:'absolute',
top:'70px',
left:'0px',
width:'100%',
height:'auto',
zindex:'2'
}
return(
<div className="col-md-8 col-sm-8">
<div className="row">
<div className="col-md-11 col-sm-11 search-container">
<input type="text" className="form-control" name="search" placeholder="Search" />
<i className="fa fa-search"></i>
</div>
<div className="col-md-1 col-sm-1 bell-container flex all-center relative">
<img src={bell} alt="bell icon" />
</div>
</div>
<NotificationList style={style} className="notification-component" />
</div>
)
}
}
export default Search;
您可以使用props
访问它,在您的情况下,它是this.props.style
前
您只传递了样式,但未在通知中使用
import React from 'react';
import bell from '../../../assets/icons/bell.svg';
import NotificationList from '../notification/NotificationList';
class Search extends React.Component{
constructor()
{
super()
this.state={
notificationStatus:false
}
}
render()
{
const style={
position:'absolute',
top:'70px',
left:'0px',
width:'100%',
height:'auto',
zindex:'2'
}
return(
<div className="col-md-8 col-sm-8">
<div className="row">
<div className="col-md-11 col-sm-11 search-container">
<input type="text" className="form-control" name="search" placeholder="Search" />
<i className="fa fa-search"></i>
</div>
<div className="col-md-1 col-sm-1 bell-container flex all-center relative">
<img src={bell} alt="bell icon" />
</div>
</div>
<NotificationList style={style} className="notification-component" />
</div>
)
}
}
export default Search;
您可以使用props
访问它,在您的情况下,它是this.props.style
前
您真的应该在JS系统中使用带有React的CSS。看看情感。你真的应该在JS系统中使用CSS和React。看看情绪。