1
Ich helfe beim Erstellen einer Webapp und wir haben vor kurzem auf Stift umgeschaltet und reagieren. Ich habe alle Stylus-Lang-Dateien neu geschrieben und einige geschrieben, aber die Reaktion wird überhaupt nicht gestylt. Hier ist die Komponente unten.Stylus funktioniert nicht mit React
import React, { Component } from 'react'
import Icon from 'react-component-bytesize-icons'
class CoursesCard extends Component {
render() {
const divStyle = {
backgroundImage : '/assets/img/animatingCourse.jpg'
}
return (
<div className='CoursesCard' style={divStyle}>
<div className='CardOverlay'>
<h3>What the courses is called?</h3>
<p>Last Checed</p>
<p>Users online</p>
</div>
</div>
)
}
}
export default CoursesCard
Hier ist der Griffel lang Code:
.CoursesCard {
width 32%
margin 10px 1%
float left
padding-top 20%
display inline-block
background white
box-shadow 0px 3px 20px #555
background-repeat no-repeat
background-size cover
cursor pointer
&.hover{
box-shadow 0px 3px 22px #333
}
.CardOverlay {
width 100%
height auto
padding 10px 0
background rgba(33,51,66,0.8)
color #fff
background-repeat no-repeat
background-size cover
cursor pointer
&.hover {
box-shadow 0px 3px 22px #333
}
h3{
font-size 18px
font-weight 500
margin-bottom 5px
margin-left 10px
}
p.lastChecked{
font-size 13px
font-weight 100
margin-bottom 5px
margin-left 10px
}
p.onlineUsers{
font-size 14px
font-weight 400
margin-left 10px
display block
}
}
}