so i used the react awesome slider package to make a slideshow for my home page, i searched for the css file responsible for the package in the modules folder but i can't manage to resize no matter what i try. here's the slider code:
import React from 'react';
import AwesomeSlider from 'react-awesome-slider';
import 'react-awesome-slider/dist/styles.css';
import withAutoplay from 'react-awesome-slider/dist/autoplay';
export const Slider = () => {
const AutoplaySlider = withAutoplay(AwesomeSlider);
return (
<AutoplaySlider play={true} cancelOnInteraction={true} interval={2500}>
<div data-src="https://assets.hardwarezone.com/img/2021/01/model-o-wireless-2.jpg" />
<div data-src="https://i.ytimg.com/vi/RMiBuqYje2w/maxresdefault.jpg" />
<div data-src="https://esportlandet.se/wp-content/uploads/Allting/Artiklar/2019-10-12_dota2uppdatering/00100lPORTRAIT_00100_BURST20191012213318643_COVER-min_2_34-2.jpg" />
</AutoplaySlider>
);
};
i tried putting the slider on a container and style it with css but it just ignore it.
Related
i have installed rellax.js in vue3 project.
import App from './App.vue'
import VueRellax from 'vue-rellax'
createApp(App).use(VueRellax).mount(#app)
but when i add rellax class on any components template tags its not working
<section class="rellax section portfolio-section pd-34" id="portfolio">
<PortfolioComponent />
</section>
not working when i add class rellax in component class even doesnot show in inspect
It looks like vue-rellax was never rewritten for Vue 3. You're likely better off to use the rellax library and import it into your components or as a window variable.
App.vue:
<script setup>
import { onMounted } from 'vue';
import Rellax from 'rellax'
onMounted(() => {
let rellax = new Rellax('.rellax');
})
</script>
I am currently working on a project with Vue 3 and Element Plus.
As of the moment, the element plus Icons are not showing on my app.
I have installed them with yarn using
$ yarn add #element-plus/icons
and I have no idea what to do next.
I have tried importing it on my main.ts file.
import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import ElementPlus from "element-plus";
import "element-plus/dist/index.css";
import "#element-plus/icons";
createApp(App).use(store).use(router).use(ElementPlus).mount("#app");
But it is not showing still.
The #element-plus/icons package contains named exports for each icon found in the Icon Collection. For example, to use the MagicStick icon, import it by name, and register it as a component. In Vue 3, you can use a <script setup> block to locally register the component simply by importing the component:
<script setup>
import { MagicStick } from '#element-plus/icons-vue'
</script>
Then use it as a component in your template:
within <el-icon>, which lets you easily specify the icon's size and color as props
Note: Clicking an icon card from the Icon Collection UI automatically copies boilerplate markup (<el-icon><magic-stick/><el-icon>) to your clipboard for easily pasting it into your own file.
<template>
<el-icon :size="100">
<MagicStick />
</el-icon>
</template>
or standalone, which requires applying your own styles:
<template>
<MagicStick class="icon" />
</template>
<style scoped>
.icon {
color: #f00;
height: 200px;
}
</style>
demo
Hello I'm using React to build a website and I want to use .CSS files for my CSS and I'm using import './example.css' in my component file.
Example:
import React from 'react';
import 'Home.css';
const Home = () => {
return (
<div className="example">
Hi
</div>
)
}
and if i create another page but don't import this CSS file, I get the styles on my other page
other page:
import React from 'react';
const About= () => {
return (
<div className="example">
Hi
</div>
)
}
Any reason and solution for this?
When importing a css file like you've done it will be injected into the project and not just into the component you're importing it from.
What you're looking for is css-modules (adding css-modules using create-react-app)
import React from 'react';
import styles from 'Home.css';
const Home = () => {
return (
<div className={styles.example}>
Hi
</div>
)
}
The reason is that you are using the same class in both of your components.
Doing import 'Home.css' does not encapsulate .css only for that component, all of the .css gets bundled together so it ends up overwriting styles somewhere down the line.
For each of the components, you can specify a unique className on top of your component, and use that class to style only that component.
.home-container .header { ... }
You can also make one global .css part to put styles that you want to keep using throughout the whole app.
I am setting up two different nav bars, one for mobile and one for desktop version, i currently have the desktop version decently done and working on the mobile version, but when i put both components in a single app.js the mobile navbar.js is reaching out and grabbing properties from my nav < ul < li etc. from the desktop navbar. Is there a way to only include the files that are imported into the js files. In my desktop navbar i have my desktop navbar scss and in my mobile navbar i have my mobile navbar.scss. Here is my app.js setup.
import React, {Component} from 'react'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap/dist/js/bootstrap.js'
import 'util/util.js'
import HomePageBody from '../components/homepage/HomePageBody.jsx'
import Footer from '../components/footer/Footer.jsx'
import Menubar from "../components/menubar/MenuBar";
import SideBar from '../components/sidebar/SideBar'
class HomePage extends Component {
componentDidMount() {
window.scrollTo(0, 0);
}
render() {
return (
<React.Fragment>
<div style={{height: '100%'}}>
<Menubar />
<SideBar />
<HomePageBody />
<Footer />
</div>
</React.Fragment>
)
}
}
export default HomePage
When I route my app to another component by using react-router-dom, the CSS doesn't change.
This is a minimalistic version of the code to demonstrate
App.js
import React from 'react';
import Home from './Home';
function App() {
return (
<div>
<Home></Home>
</div>
);
}
export default App;
Home.js
import React from 'react';
import './Home.css';
const Home = () => {
return (
<h1>Home</h1>
);
}
export default Home;
Home.css
body {
background-color: blue;
}
Dashboard.js
import React from 'react';
import './Dashboard.css';
import React from 'react';
import './Dashboard.css';
const Dashboard = () => {
return (
<div className='content'>
<h1>Dashboard</h1>
</div>
);
}
export default Dashboard;
Dashboard.css
.content {
display: flex;
align-content: center;
align-items: center;
}
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import Dashboard from './Dashboard';
import * as serviceWorker from './serviceWorker';
import { BrowserRouter as Router, Route } from 'react-router-dom';
ReactDOM.render(
<Router>
<div>
<Route exact path='/' component={App} />
<Route path='/dashboard' component={Dashboard} />
</div>
</Router>, document.getElementById('root'));
// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: ...
serviceWorker.unregister();
When I do /dashboard, it loads the Dashboard component, but it keeps the previous CSS that was loaded from the Home component that resides the App component. The background stays blue. I want that when I route to another component because I changed the URL, it loads whatever CSS that new component has attached to it and gets rid of whatever CSS was before. Is that possible?
Edit: I have made an example in CodeSandbox to illustrate. It's a little different from the code above due to the limitations of the playground, but the functionality is the same.
From what can be seen, importing as a module ends up importing it globally. If we comment the line import Home from "./Home"; the blue background disappears. Just importing the component, imports the whole CSS despite the CSS being imported in a modular way. I'm not sure if I am missing something.
Edit 2:
Here are the different solutions I tried:
CSS Modules, but the body style was still globally loaded.
Styled components don't let me modify the body or html selectors CSS. They require me to create a <div> element and
then have that element span the whole body which I would style
as if it was the body. Which is a workaround I don't want to use because for that I rather use CSS Modules for the whole body spanning .
Inline styling also doesn't let me modify the body or html selectors CSS. I would also need to use a workaround like a body spanning <div> as in Styled components.
The problem
When you import a css like you're doing here
import './Home.css';
you're importing it in a global scope, which means it will not disappear once imported.
The solutions
CSS Modules
What you want is either CSS Modules, which is used like this:
import styles from './Home.css';
<a className={styles.myStyleClass}>Hello</a>
Styled components
or a CSS-in-js framework such as styled components which is used like this:
import styled from 'styled-components';
const MyStyledElement = styled.a`
color: blue;
`;
<MyStyledElement>Hello</MyStyledElement>
Regular objects / inline styling
or just "regular" CSS-in-js like:
const myStyle = {
color: blue;
}
<a style={myStyle}>Hello</a>
There are plenty of options when it comes to styling, these alternatives are popular ones that I encourage you to explore and see which you enjoy.
After doing some more tests I have concluded that as of now it is not possible to change whatever CSS styles have been applied to a <body> or <html> selector in an React SPA when a CSS file is already loaded and one uses React Router to render other components. I still appreciate the answers and the time taken to help me find a solution. They are still valid answers if we are not talking about the <body> or <html> node in an HTML document. From them I learned about other ways to use CSS in React. I modified the original post with the solutions I tried.
What ended working was modifying the DOM styles with JavaScript whithin the component itself.
Home.js
import React from "react";
const Home = () => {
// Modify the DOM Styles with JavaScript
document.body.style.backgroundColor = "blue";
// Or uncomment below to modify the
// document root background color
// which in this case would be <html>
//document.bgColor = "blue";
// Or modify the root tag style of the document instead of the
// <body> (<html> in this case)
//document.documentElement.setAttribute('style', 'background-color: green');
return (
<div>
<h1>Home</h1>
<form action="/dashboard">
<input type="submit" value="Go to Dashboard" />
</form>
</div>
);
};
export default Home;
Here is a working example:
Where my app wasn't loading style sheets and the like. However, I was importing my assets directly into my index.html entry point.
By replacing the links with absolute paths as per this documentation, my problem was resolved.
For me, this meant changing
<head>
<link rel="stylesheet" href="./style.css" ></link>
</head>
to this:
<head>
<link rel="stylesheet" href="/style.css" ></link>
</head>
I'm not sure if the same thing would work for your import statements, but it is worth a shot.
More info: styles-not-working-with-react-router