score:1
Accepted answer
you can't change a sass variable during runtime because sass is compiled to css during your build step. but if i was in your situation i would try to replace the sass variable with a css custom variable and see if it works, should be doable i think. (won't work in ie11 though)
:root {
--one-year: 5s;
}
.planets__earth-orbit {
width: 20rem;
height: 20rem;
animation: rotation var(--one-year) linear infinite;
}
and update the variable value on the root element via javascript
rootelement.style.setproperty('--one-year', `${newvalue}s`);
Source: stackoverflow.com
Related Query
- Manipulating SASS variable in React Component
- How to pass a state className variable to another component in react
- How to pass in an instance variable from a React component to its HOC?
- React Component check is variable is empty
- Updating the react component state when a global variable changes
- React Dev Tools does not show Component Names or State Variable Names
- accessing environment variable from react component
- How to pass props to react component that wrapped in variable
- Conditionally setting className based on a state variable in a React functional component
- use of variable inside render function of react component
- Use css/scss variable in React component as inline style
- accessing variable from script tag in html file in react component
- Inserting html inside string variable used in React component
- How to pass variable to react component
- How to change a SASS variable value using React Js?
- React tree-shakable component library with Rollup and Sass
- Unable to print javascript variable text in html inside a react component
- Rendering a component using a variable in React
- Best practice in manipulating redux state locally in React component
- How to pass graphQL query variable into a decorated react component
- React How to return div and variable value for another component
- Passing a variable from a jade file to a React Component
- React Function component setting state variable V/s using local variable
- Manipulating DOM elements within a React component
- Pass CSS variable as prop to the react component
- how to get a Component variable from another component but their both in the same file React
- Assign a React component to a variable with extra props
- Setting variable to React component not working
- Variable number of generic arguments for React component in Typescript
- How react functional component can use object variable which declared behind the usage? (include example)
More Query from same tag
- separating single authentication file into multiple files in react , now no display of login button
- Is there a way to update the function in the eventlistener in a React Functional Component?
- How to display QR code image in React from string type
- Limit the upload number of image in reactjs
- React dropdown issue
- Change Text field of Material UI from black to white
- Formik / Yup Validation for Register Form on React
- Can not get clientWidth using useEffect
- React using JQuery post+get data
- Deleting a todo - MERN Stack
- Why can't my React app re-render eventhough I'm updating state?
- How to access other state/property value in new state prop
- Jest Snapshot test returns an error looking for the file with a .ts extension though the test file is a .tsx
- Rendering multiple graphs in react js from canvasjs
- How to update only if my object has a certain field
- Is there any method to fetch the data from back-end MongoDB and show at front-end react JS?
- Best method of importing scss variables with React Styled-Components?
- Refresh page when localStorage is deleted
- How to delete .eslintcache file in react?
- How to change the url in the fetch statement React JS using props?
- Inline CSS styles in React: how to implement media queries?
- Modelling data based on a time range using redux/normalizr
- React. How to get access to state or props of already created component objects?
- Rendering three.js element in React?
- React: How to set a component in 'active' state one at a time, and remove 'active' from all other component on click?
- How do I tell React component to change its state when an event is triggered from third party lib?
- How to serve a HTML + markup string to ReactJS component as a prop?
- TypeError: Cannot read property 'trim' of undefined in ReactJS
- Material Design Components Toggle effect not working
- How to restrict access by NGINX basic_auth for every URL except one URL?