Develop Reference

How to use less.modifyVars in React?

I've found a online demo here:https://codepen.io/seven-phases-max/pen/dPYxzR
want to use it in my React project, but somehow it is not working with React.
the less file:
#primaryColor: #006699;
.lessTest {
width: 100px;
height:100px;
background-color:#primaryColor;
}
Js file:
import React, { useEffect } from 'react';
import less from 'less'
function App() {
useEffect(() => {
less.modifyVars({ primaryColor: "#ffe4e1" });
less.refreshStyles();
}, [])
return (
<div className='App'>
<div className='lessTest'>213</div>
</div>
);
}
export default App;
it seems modifyVars not working.
I've create a demo to explane :
https://stackblitz.com/edit/react-twpmxg?file=src/App.js

Your first question: Where does the less instance come from?
In the project settings of the codepen, some javascript libraries are added, including less.js:
How do I use less.modifyVars in my React project?
First, you need to add less to your project (assuming you haven't already): Using .less files with React
Next, add less.js to your React app's /public/index.html file:
<script src="http://lesscss.googlecode.com/files/less-1.0.30.min.js"></script>
Finally, reference less.modifyVars like so:
//Component.js(x)
window.less.modifyVars({ "cool-variable": red });
window.less.refreshStyles();
note: solution not tested

How to remove CSS from global scope and only import to the specific pages in React, Gatsby

Currently, I am trying to implement a keen-slider library(https://www.npmjs.com/package/keen-slider).
For installation, we need to add import 'keen-slider/keen-slider.min.css'.
In that case, the keen slider CSS is added to global, as you know.
The CSS is included globally in the page markup. From my perspective, it should be included only on pages where the slider is used
Is there any solution to solve this problem?

I'm not sure to understand the issue. You can always choose to import a file (CSS or whichever format you want) globally or in a specific file.
For your use-case, as soon as you install the dependency (npm install keen-slider --save), you will be able to import the minified CSS into the needed component. For example:
import React from 'react'
import 'keen-slider/keen-slider.min.css'
import { useKeenSlider } from 'keen-slider/react'
export function IndexPage(){
const [sliderRef, slider] = useKeenSlider()
return <section className="slider-wrapper">
<div ref={sliderRef}>
<div class="keen-slider__slide">1</div>
<div class="keen-slider__slide">2</div>
<div class="keen-slider__slide">3</div>
</div>
</section>
}
With this approach, you will be only importing the keen-slider.min.css in the IndexPage.

I think, you can try to lazily load your component via:
const OtherComponent = React.lazy(() => import('./OtherComponent'));
Also you should do import 'keen-slider/keen-slider.min.css' inside of OtherComponent.
More info here: https://reactjs.org/docs/code-splitting.html

How to use AOS css library with ReactJS project?

Fairly new to react, so I'm wondering if anyone can give me a sort of step-by-step rundown on how I can use AOS? I already did yarn add aos. Thanks!!

if you are referring to the AOS scroll library you have to import it and call it in the App.js file then call the init function :
import Aos from 'aos';
function App() {
Aos.init();
return (
<div className="App">
</div>
);
}
export default App;
and for each element you want to animate you add one of the aos class names for example:
<div data-aos="fade-down"> im a div </div>
you can find more options for animations in the AOS documentation: https://michalsnik.github.io/aos/
UPDATE: you also need to import the AOS CSS like so:
import 'aos/dist/aos.css';

Pass in a stylesheet as a prop for a render in a functional component

I'm using Next.js, React, Styled JSX, and Postcss if that matters. I need to style an imported component for a specific page. Since the stylesheets are created for a specific component at the time of render, I figured I could just put the custom styles for the component in with the page specific resources and pass them in. But I'm getting the following error:
Expected a template literal or String literal as the child of the JSX Style tag (eg: <style jsx>{`some css`}</style>), but got MemberExpression
I have two functional renders in two separate directories and files, one a page and the other a component:
src/pages/mypage/
index.js
styles.css
myComponentStyles.css
src/components/MyComponent
index.js
styles.css
Keeping in mind that file/directory referencing is not mirrored from my environment because it's not the problem, here's my code:
src/pages/mypage/index.js
import MyComponent from '../../components/MyComponent'
import styles from './styles.css'
import MyComponentStyles from './myComponentSyles'
const MyPage = () => {
return (
<div className="my-page-container">
<style jsx>{styles}</style>
<MyComponent styles={MyComponentStyles} />
</div>
)
}
export default MyPage
src/components/MyComponent/index.js
import styles from './styles.css'
const myComponent = props => {
return (
<>
<style jsx>{styles}</style>
<style jsx>{props.styles}</style>
<div className="my-component-main-container">MyComponent</div>
</>
)
}
export default MyComponent
How would I allow MyComponent to receive a stylesheet generated by another component?

Although this is not a direct solution to the problem, Styled JSX has a :global() pseudo selector that accomplishes the end goal of styling a component that is outside the scope of the current component. A working example for the given code is:
src/pages/mypage/styles.css
.my-page-container :global(.my-component-main-container){
color: white;
}
Here is what the Next.js documentation says for the :global() pseudo selector:
One-off global selectors
Sometimes it's useful to skip selectors scoping. In order to get a
one-off global selector we support :global(), inspired by css-modules.
This is very useful in order to, for example, generate a global class
that you can pass to 3rd-party components. For example, to style
react-select which supports passing a custom class via
optionClassName:
import Select from 'react-select'
export default () => (
<div>
<Select optionClassName="react-select" />
<style jsx>{`
/* "div" will be prefixed, but ".react-select" won't */
div :global(.react-select) {
color: red
}
`}</style>
</div> )

Using a component containing other components within a router-view in Vue.js

I am trying to build a layout using single-file components in Vue.js, with dynamic population and URLs using Vue-router. (I'm using the webpack template via vue-cli as well.)
It works as expected for my app.vue file-- containing the nav, sidebar, page head, and <router-view>-- and the <router-view> content appeared as expected when the correct <router-link> is clicked... until I tried to add subcomponents to the add-load component being called to the <router-view>. Now, nothing appears at all, despite not throwing any errors.
Admittedly, I am not basing my structure on any examples, as I couldn't really find any doing it the way I was hoping to. I wanted to use nested components by calling them like custom elements-- I think this makes the code much easier to read and maintain. I'm not entirely sure how to structure it otherwise, to be honest. Using multiple <router-view>s as siblings to each other seems counterintuitive to me.
I've tried a variety of combinations of how and where to import and call the components, and nothing has worked. The only way I can get any content to load is if I only call a single component for path: '/add-load'. Is it just impossible to use multiple components outside of your base app.vue? I find that hard to believe. Here's what I started with.
From my index.js:
import AddLoad from '#/components/AddLoad'
import AddLoad from '#/components/ProgressSteps'
import Stops from '#/components/Stops'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
components: {
Sidebar,
TopNav,
MobNav,
PageHead
}
},
{
path: '/add-load',
components: {
AddLoad,
ProgressSteps}
}
]
})
From my App.vue file (the multiple component behavior that I'd like to mimic is shown here):
<template>
<div id="app">
<div class="wrapper">
<Sidebar/>
<div class="container-fluid">
<TopNav/>
<MobNav/>
<div class="container-fluid">
<PageHead/>
<router-view></router-view>
</div>
</div>
</div>
</div>
</template>
<script>
import Sidebar from '#/components/Sidebar'
import TopNav from '#/components/TopNav'
import MobNav from '#/components/MobNav'
import PageHead from '#/components/PageHead'
export default {
name: 'App',
components: {
Sidebar,
TopNav,
MobNav,
PageHead
}
}
</script>
From my AddLoad.vue file:
<template>
<div class="add-load">
<div class="content-container container-slim">
<progress-steps/>
<router-link to="#stops">Stops</router-link>
<router-view></router-view>
</div>
</div>
</template>
<script>
import ProgressSteps from '#/components/ProgressSteps'
export default {
name: 'AddLoad',
component: ProgressSteps
}
</script>
Here is a link to a codesandbox, so you can see the full functionality. https://codesandbox.io/s/7k520xk0yq