css - 如何将此样式应用到我的幻灯片中？

标签 css reactjs

我想对我的幻灯片应用不同的样式。于是在网上找了一个，符合我的愿望。我试图插入它，但不幸的是它根本不起作用。您知道我如何将 CSS 代码与我的幻灯片合并吗？

幻灯片.js

import React from "react";

import { Gallery, GalleryImage } from "react-gesture-gallery";

const images = [
  "https://img-9gag-fun.9cache.com/photo/amBjg8y_700bwp.webp",
  "https://img-9gag-fun.9cache.com/photo/abYPGB8_700bwp.webp",
  "https://img-9gag-fun.9cache.com/photo/abYPgY8_700bwp.webp",
  "https://img-9gag-fun.9cache.com/photo/az9NeXq_700bwp.webp",
  "https://img-9gag-fun.9cache.com/photo/aPYNZ4Q_700bwp.webp"
];

function Slider() {
  const [index, setIndex] = React.useState(0);


  return (
    <Gallery
      style={{
        position: "relative",
        background: "white",
        height: "40vh",
        width: "180w"
      }}
      index={index}
      onRequestChange={i => {
        setIndex(i);
      }}
    >
      {images.map(image => (
        <GalleryImage objectFit="contain" key={image} src={image} />
      ))}
    </Gallery>
  );
}


export default Slider;

当前样式

*,
::after,
::before {
  box-sizing: content-box;
}
element.style {
  background-color: black;
}
body {
  padding: 0px;
}

.App {
  font-family: sans-serif;
}
.vertical-timeline-element-icon,
.bounce-in {
  box-shadow: 0px 0px transparent;
  text-align: center;
  margin-bottom: 50px;
}
.adventure {
  width: 400px;
}
.vertical-timeline-element-date {
  text-align: left;
  width: 80%;
}
.img_logo {
  width: 60px;
  height: 60px;
  border-radius: 50%;
}

@media only screen and (min-width: 1170px) {
  .vertical-timeline.vertical-timeline--two-columns:before {
    left: 50%;
    margin-left: -2px;
    background: #ddd;
  }
}

@media only screen and (max-width: 1172px) {
  .vertical-timeline-element-content {
    margin-left: 8%;
  }
  .img_logo {
    width: 40px;
    height: 40px;
  }
}

@media only screen and (max-width: 772px) {
  .vertical-timeline-element-content {
    margin-left: 14%;
  }
}

.loader {
  border: 10px solid #bebebe;
  border-top: 10px solid #000000;
  border-radius: 50%;
  width: 70px;
  height: 70px;
  animation: spin 1s linear infinite;
  margin: auto;
  margin-top: 20%;
}

.Buttons {
  margin-top: 200px;
}
.btn1 {
  background-color: #d23c21;
  color: white;
  padding: 16px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 18px;
  margin: 4px;
  cursor: pointer;
  border-radius: 6px;
}
.btn2 {
  background-color: #3f66cb;
  color: white;
  padding: 16px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 18px;
  margin: 4px;
  cursor: pointer;
  border-radius: 6px;
}
.btn3 {
  background-color: #f69a1d;
  color: white;
  padding: 16px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 18px;
  margin: 4px;
  cursor: pointer;
  border-radius: 6px;
}
.btn4 {
  background-color: #4caf50;
  color: white;
  padding: 16px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 18px;
  margin: 4px 2px;
  cursor: pointer;
  border-radius: 6px;
}

.App {
  font-family: sans-serif;
  text-align: center;
  color: black;
}

.home {
  margin-top: 10%;
  text-align: center;
}

.header {
  margin-top: 10%;
  text-align: center;
}

.Text {
  text-align: center;
  width: 50%;
  font-size: 100%;
  margin: 0 auto;
  display: flex;
}

.timeline-badge.primary {
  background-color: #ffa500 !important;
}
.timeline-badge.success {
  background-color: #ffa500 !important;
}
.timeline-badge.warning {
  background-color: #ffa500 !important;
}
.timeline-badge.danger {
  background-color: #ffa500 !important;
}
.timeline-badge.info {
  background-color: #ffa500 !important;
}
.timeline-title {
  margin-top: 0;
  color: inherit;
}
.timeline-body > p {
  margin-bottom: 0;
  width: 80px;
  font-size: 22px;

  align: center;
  text-align: center;
  margin-left: 40px;
}
.timeline-body > p + p {
  margin-top: 5px;
  width: 22px;
  text-align: center;
}

.same {
  font-size: 20px;
}

.home {
  margin-top: 10%;
  text-align: center;
}

.header {
  margin-top: 10%;
  text-align: center;
}

.Text {
  text-align: center;
  width: 50%;
  font-size: 100%;
  margin: 0 auto;
  display: flex;
}

.Logo {
  width: 50%;
}

.event {
  display: flex;
  position: absolute;
  width: 100%;
  margin-top: -60px;
  transition: background-color 1s ease-in;
  height: 700px;
}
.Videotext {
  text-align: center;
  position: relative;

  height: 100%;
  width: 50%;
  font-size: 100%;
  margin-top: 0;
  margin-left: 2%;
  display: 0;
}

.Video {
  width: ´100%;
  height: 20%;
  margin-bottom: 12%;
  background-color: "black";

  display: block;
  float: left;

  transition: width 0.8s ease-out, height 0.3s ease-out;
}
.arrow {
  width: 0px;
  height: 0px;
  position: flex;
  border: 50px solid transparent;
  border-top-color: orange;
  margin: 0;
  margin-left: -20px;
  padding: 0;
  float: left;
  margin-top: 75px;

  display: 0;
  animation-name: meine-animation;
  animation-duration: 1s;
  animation-iteration-count: infinite;
}

@keyframes meine-animation {
  0%,
  100% {
    border-top-color: orange;
  }

  50% {
    border-top-color: white;
  }

  75% {
    border-top-color: orange;
  }
}

.arrow.left {
  transform: rotate(90deg) translate(0px, 25px);
  -webkit-transform: rotate(90deg) translate(0px, 0px);
  -moz-transform: rotate(180deg) translate(0px, 25px);
  -o-transform: rotate(180deg) translate(0px, 25px);
  -ms-transform: rotate(180deg) translate(0px, 25px) translate(0px, 25px);
}

#boxi {
  margin-top: 200px;
}

#animation {
  color: orange;
  padding: 0px;

  position: absolute;
  margin-top: 100px;
  margin-left: -10px;
}

.slider {
  display: block;
  margin-left: 50%;
  margin-top: 10%;
  display: flex;
  border-color: rgb(0, 108, 197);
  border-width: 5px;
  border-style: solid;  
}

@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
  .slider {
    display: block;
    width: 130px;
    height: 130px;
    display: flex;
    border-color: rgb(0, 108, 197);
    border-width: 5px;
    border-style: solid; 
  }
}

我要插入的样式.css

body {
background:url(http://subtlepatterns.subtlepatterns.netdna-cdn.com/patterns/low_contrast_linen.png) repeat;
  -webkit-font-smoothing: subpixel-antialiased;
background-color: rgb(243, 243, 243);
}
#warp {
  width: 90%;
  max-width: 800px;
    background: #595959;
    margin: 30px auto;
    overflow: hidden;
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.75);
    -moz-box-shadow: 0 3px 5px rgba(0, 0, 0, 0.75);
    -webkit-box-shadow: 0 3px 5px rgba(0, 0, 0, 0.75);
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
}
ul#gallery-container {
    position: relative;
    width: 100%;
    max-width: 800px;
    height: auto;
    padding: 52% 0 10px;
    margin: 0;
    text-align: center;
    display: block;
}
li.gallery-item {display: inline-block;width: 10%;cursor:pointer;*display:inline;}
img.gallery-preview{
    background: white;
    margin: 0;
    padding: 5% 5% 15%;
    *padding: 2px 2px 10px;
    position: relative;
    top: 0;
    width: 85%;
    height: auto;
    max-height: 45px;
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    overflow: hidden;
    -webkit-transition: all 0.3s ease-out .2s;
    -moz-transition: all 0.3s ease-out .2s;
    -o-transition: all 0.3s ease-out .2s;
    transition: all 0.3s ease-out .2s;
}
ul#gallery-container:hover li img.gallery-preview{opacity: 0.5;-webkit-filter:blur(2px) grayscale(0.5); }
ul#gallery-container:hover li:hover img.gallery-preview{opacity: 1;-webkit-filter:blur(0px) grayscale(0); }

input.gallery-selector:checked ~ label.gallery-label>img.gallery-preview,
ul#gallery-container:hover li:hover img.gallery-preview:hover{
z-index: 5;
box-shadow: 0 4px 5px rgba(0, 0, 0, 0.75);
-moz-box-shadow: 0 4px 5px rgba(0, 0, 0, 0.75);
-webkit-box-shadow: 0 4px 5px rgba(0, 0, 0, 0.75);
-webkit-transform: scale(1.25);
-moz-transform: scale(1.25);
-o-transform: scale(1.25);
transform: scale(1.25);

-webkit-transform-origin: bottom center;
-moz-transform-origin: bottom center;
-o-transform-origin: bottom center;
transform-origin: bottom center;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
ul#gallery-container:hover li:hover img.gallery-preview:hover {z-index: 20;}
input.gallery-selector:checked ~ label.gallery-label>img.gallery-preview{background: #333}
input.gallery-selector:checked ~ label.gallery-label:before{
content: " ";
position: relative;
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 20px solid #333;
top: -30px;
}

img.gallery-fullsize {
position: absolute;
top: 0px;
left: 0px;
display: block;
width: 100%;
height: auto;
z-index: -1;
opacity: 0;
-webkit-transform: scale(0.25);
-moz-transform: scale(0.25);
-o-transform: scale(0.25);
transform: scale(0.25);
-webkit-transform-origin: bottom center;
-moz-transform-origin: bottom center;
-o-transform-origin: bottom center;
transform-origin: bottom center;
-webkit-transition: all 0.3s ease-out;
-moz-transition: all 0.3s ease-out;
-o-transition: all 0.3s ease-out;
transition: all 0.3s ease-out;
}
ul#gallery-container:hover li.gallery-item:active img.gallery-fullsize{
z-index: 50;
opacity: 0.75;
-webkit-filter:blur(10px) grayscale(1);
border-radius: 10%;
-webkit-border-radius: 10%;
-moz-border-radius: 10%;
-webkit-transform-origin: bottom center;
-moz-transform-origin: bottom center;
-o-transform-origin: bottom center;
transform-origin: bottom center;
-webkit-transition: all 0.3s ease-out .2s;
-moz-transition: all 0.3s ease-out .2s;
-o-transition: all 0.3s ease-out .2s;
transition: all 0.3s ease-out .2s;
}
ul#gallery-container:hover li:hover input.gallery-selector:checked ~ img.gallery-fullsize{z-index: 10;opacity: 1;border-radius: 0;-moz-border-radius: 0;-webkit-border-radius: 0;}

input.gallery-selector:checked ~ img.gallery-fullsize {
display: block;
opacity: 1;
z-index: 10;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);

-webkit-transform-origin: top center;
-moz-transform-origin: top center;
-o-transform-origin: top center;
transform-origin: top center;
-webkit-transition: all .2s ease-in .3s;
-moz-transition: all .2s ease-in .3s;
-o-transition: all .2s ease-in .3s;
transition: all .2s ease-in .3s;
}
input.gallery-selector {display: none;}
label.gallery-label {cursor: pointer;}

我要插入的样式中的 html.html

<div id="warp">
<ul id="gallery-container">
  <li class="gallery-item">

    <input checked="checked" type="radio" name="gallery-list" class="gallery-selector" value="1.jpg" id="gallery-item1" />
        <img src="http://lorempixel.com/400/200/sports" class="gallery-fullsize"  alt="location bateau 135ch" />
        <label for="gallery-item1" class="gallery-label">
            <img src="http://lorempixel.com/76/50/sports" class="gallery-preview"  alt="location bateau 135ch"/>
        </label>
    </li>
    <li class="gallery-item">

        <input type="radio" name="gallery-list" class="gallery-selector" value="2.jpg" id="gallery-item2" />
        <img src="http://lorempixel.com/400/200/sports/1" class="gallery-fullsize"  alt="location bateau 135ch" />
        <label for="gallery-item2" class="gallery-label">
            <img src="http://lorempixel.com/76/50/sports/1" class="gallery-preview"  alt="location bateau 135ch"/>
        </label>
    </li>
    <li class="gallery-item">

        <input type="radio" name="gallery-list" class="gallery-selector" value="3.jpg" id="gallery-item3" />
        <img src="http://lorempixel.com/400/200/sports/2" class="gallery-fullsize"  alt="location bateau 135ch" />
        <label for="gallery-item3" class="gallery-label">
            <img src="http://lorempixel.com/76/50/sports/2" class="gallery-preview"  alt="location bateau 135ch"/>
        </label>
    </li>
    <li class="gallery-item">

        <input type="radio" name="gallery-list" class="gallery-selector" value="4.jpg" id="gallery-item4" />
        <img src="http://lorempixel.com/400/200/sports/3" class="gallery-fullsize"  alt="location bateau 135ch" />
        <label for="gallery-item4" class="gallery-label">
            <img src="http://lorempixel.com/76/50/sports/3" class="gallery-preview"  alt="location bateau 135ch"/>
        </label>
    </li>
    <li class="gallery-item">

        <input type="radio" name="gallery-list" class="gallery-selector" value="5.jpg" id="gallery-item5" />
        <img src="http://lorempixel.com/400/200/sports/4" class="gallery-fullsize"  alt="location bateau 135ch" />
        <label for="gallery-item5" class="gallery-label">
            <img src="http://lorempixel.com/76/50/sports/4" class="gallery-preview"  alt="location bateau 135ch"/>
        </label>
    </li>
    <li class="gallery-item">

        <input type="radio" name="gallery-list" class="gallery-selector" value="6.jpg" id="gallery-item6" />
        <img src="http://lorempixel.com/400/200/sports/5" class="gallery-fullsize"  alt="location bateau 135ch" />
        <label for="gallery-item6" class="gallery-label">
            <img src="http://lorempixel.com/76/50/sports/5" class="gallery-preview"  alt="location bateau 135ch"/>
        </label>
    </li>
    <li class="gallery-item">

        <input type="radio" name="gallery-list" class="gallery-selector" value="7.jpg" id="gallery-item7" />
        <img src="http://lorempixel.com/400/200/sports/6" class="gallery-fullsize"  alt="location bateau 135ch" />
        <label for="gallery-item7" class="gallery-label">
            <img src="http://lorempixel.com/76/50/sports/6" class="gallery-preview"  alt="location bateau 135ch"/>
        </label>
    </li>
</ul>
</div>

最佳答案

您需要创建一个 css 文件并将其导入到组件中。要在 JSX 中设置类名，请传递带有字符串的 className 属性。

示例 CSS 文件

.Class {
    opacity: 1;
}

来自组件的示例渲染方法

import './example.css'

render(){
    <div className="Class">something</div>
}

可以找到完整的文档here !

关于css - 如何将此样式应用到我的幻灯片中？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57171628/

上一篇：javascript - mdBootstrap:导航栏在展开或移动模式下将 Angular 链接保持在顶部

下一篇：javascript - 如何在光滑 slider 的垂直 slider 同步中使用箭头(上一个和下一个)保持主幻灯片和垂直幻灯片的高度相等？

相关文章：

javascript - 在渲染方法中访问此变量 [REACT NATIVE]

javascript - React/Material 使用 withStyles 将鼠标悬停在元素上时隐藏元素的子元素

css - 同一元素上两个类的 Scss 选择器

css - <div> 中的 <img> 不会垂直对齐 :middle, 为什么？

css - 适合各种屏幕的内容

html - 显示 : flex; vs calc(); performance

asp.net - asp.net如何改变列表框选中的颜色

ReactJS 导航

javascript - 如何在 react 中更新日期占位符选项 onMouseOver

reactjs - 如何跟踪用户喜欢哪些帖子？

©2024 IT工具网  联系我们