ref: Display helpers
Is there a way to change differrent css style dynamically depend on size of current breakpoint.
Something like when windows are current on xs size/position/color are differ from md and so on....
For vuetify utility classes, you insert the breakpoint in the class name. pa-2 defaults for xs and up, to change it to pa-4 from md breakpoint up, you apply both pa-2 and pa-md-4 to your element. Same goes for all other predefined utility classes for spacing, text, colors, etc.
For applying your own classes in vue without repeating the breakpoint settings in each component (and duplicating/decentralising breakpoint management), you can either:
Set classes dynamically with a computed property that returns a string of classes based on the value of this.$vuetify.breakpoint
<template>
<div :class="userCardClasses" />
</template>
<script>
export default {
...
computed: {
userCardClasses() {
if (this.$vuetify.breakpoint.mdAndUp) return 'userCard userCard--md'
// You can check the value of the helpers (mdAndUp) or write a switch/case for this.$vuetify.breakpoint.name
return 'userCard userCard--xs'
}
}
}
</script>
<style>
.userCard {
padding: 8px;
}
.userCard--xs {
background-color: blue;
}
.userCard--md {
background-color: red;
}
</style>
Import Vuetify breakpoint variables in your component and use them when writing media queries.
<style lang="scss">
#import '~vuetify/src/styles/styles.sass';
.custom-class {
display: block
}
#media #{map-get($display-breakpoints, 'md-and-down')}
.custom-class {
display: none;
}
</style>
In https://using-remark.gatsbyjs.org/hello-world-kitchen-sink/ (see source code https://github.com/gatsbyjs/gatsby/tree/master/examples/using-remark), the links don't have an underline, while in my blog https://yiksanchan.com (see source code https://github.com/YikSanChan/yiksanchan.com), all links come with an underline.
Why? And how can I get rid of the underlines? I have found a related StackOverflow question Links have an additional underline in gatsby but what I try to understand is, how does the using-remark example solve the underline problem without overriding the box-shadow props.
Following Ferran's solution, in my typography.js, I changed
Wordpress2016.overrideThemeStyles = () => {
return {
"a.gatsby-resp-image-link": {
boxShadow: `none`,
},
}
}
into
Wordpress2016.overrideThemeStyles = () => {
return {
"a.gatsby-resp-image-link": {
boxShadow: `none`,
},
"a": {
boxShadow: `none`,
},
}
}
to remove the underlink.
Your typography.js file is adding a box-shadow to all <a> elements:
a {
box-shadow: 0 1px 0 0 currentColor;
color: #007acc;
text-decoration: none;
}
If you want to get rid of that styling, just remove the rule of box-shadow property (if it's not a module). If it's a package, just override the styling with another style file (SCSS, CSS, or JS).
Yeah for some reason the default Link styling is a background-image (no idea) and box-shadow (also no idea), set them both to none and you should be right as rain.
This question already has answers here:
Selecting and manipulating CSS pseudo-elements such as ::before and ::after using javascript (or jQuery)
(26 answers)
Closed 6 years ago.
Earlier my question was:-
I have the following code in my Sass css file
.random {
box-sizing: content-box;
text-align: center;
line-height: 1;
&:before {
display: inline-block;
margin-right: 0.2em;
width: 0;
height: 0;
border-right: 0.4em solid transparent;
border-left: 0.4em solid transparent;
content: "";
vertical-align: baseline;
}
}
.perc-neg:before {
border-top: 0.5em solid #FCB062;
}
.perc-neg.good:before {
border-top: 0.5em solid #98F1AC;
}
I have a div with
class = "random perc-neg good"
Now I want to change style of the above div. how to do it?
I tried following in console but it returns empty object
$("random perc-neg good:before").css("color","red");
$("random.perc-neg.good:before").css("color","red");
$(".random.perc-neg.good:before").css("color","red");
Someone has suggested its a possible duplicate but its not.
Int he related question, the user just wanted to make it visible or hidden so two classes will be sufficient.
But my requirement is to change the color as per user's choice which he can select from wide range of colors.
Its definitely impossible to define a class with each color changes.
And we cant pass some variable to css as well to change the color property accordingly.
Updated Question:
I am now using Sass.
I have defined an function to update the color
#function em($color) {
#return border-bottom: 0.5em solid $color;
}
.perc-neg.good:before {
em(#98F1AC);
}
definitely, I can call the function from the Sass file but how to call it from javascript
Now I want to pass the hex code of color from javascript
I need to pass something like this from javascript
.perc-neg.good:before(#98F1AC)
looked for the same in google did not find anything relevant
Instead of marking it as duplicate, it would be much better if you can provide a solution
You cannot access pseudo elements in Javascript since these elements are not in the DOM.
If you want the change pseudo elements styling, you need to predefine css classes for that purpose and add/remove those based on your triggering events.
If that is not possible, simply don't set the colorproperty on the pseudo element at all, but on the host element, since :before and :after will then inherit their host element's color property (if they don't have a specific color property assigned to themselves in CSS).
You cannot call a SASS / LESS function from javascript as they are both pre-compilers that just produce a static stylesheet.
If you have a limited color pallet you could create all the rules that cover your use cases.
However you do have the ability to create a style element with javascript and append new rules to it. Here is a simple example that you could expand on
// add Style is wrapped in a closure that locks in a single
// style element that you can add to on the fly
const addStyle = (() => {
// create and append the style element
const styleSheet = document.createElement('style')
document.head.appendChild(styleSheet)
const style = styleSheet.sheet
// helper function to serialize an object to a css string
const serializeStyle = (styles) => {
return Object.keys(styles).reduce((str, prop) => {
return str + kebabCase(prop) + ':' + styles[prop] + ';'
}, '')
}
// helper function to convert camelCase to kebab-case
const kebabCase = (str) =>
str.replace(/([A-Z])/g, (_, letter) => '-'+ letter.toUpperCase())
// return the public function
return (selector, styles) => {
// add a new rule to the created stylesheet
style.insertRule(
selector + '{' + serializeStyle(styles) + '}',
style.cssRules.length
)
}
})()
addStyle('.random::before', {
border: '10px solid #aec369'
})
addStyle('.random::before', {
background: '#bada55',
boxShadow: '5px 5px 10px #777'
})
const el = document.querySelector('#color')
const em = () => {
addStyle('.random::before', {
borderColor: el.value
})
}
el.addEventListener('keyup', em)
el.addEventListener('change', em)
.random {
position: relative;
background-color: #eee;
}
.random::before {
content: '';
display: block;
height: 200px;
width: 200px;
}
<input id="color" placeholder="#000000" />
<div class="random">
</div>
How can you achieve either a hover event or active event in ReactJS when you do inline styling?
I've found that the onMouseEnter, onMouseLeave approach is buggy, so hoping there is another way to do it.
Specifically, if you mouse over a component very quickly, only the onMouseEnter event is registered. The onMouseLeave never fires, and thus can't update state... leaving the component to appear as if it still is being hovered over. I've noticed the same thing if you try and mimic the ":active" css pseudo-class. If you click really fast, only the onMouseDown event will register. The onMouseUp event will be ignored... leaving the component appearing active.
Here is a JSFiddle showing the problem: https://jsfiddle.net/y9swecyu/5/
Video of JSFiddle with problem: https://vid.me/ZJEO
The code:
var Hover = React.createClass({
getInitialState: function() {
return {
hover: false
};
},
onMouseEnterHandler: function() {
this.setState({
hover: true
});
console.log('enter');
},
onMouseLeaveHandler: function() {
this.setState({
hover: false
});
console.log('leave');
},
render: function() {
var inner = normal;
if(this.state.hover) {
inner = hover;
}
return (
<div style={outer}>
<div style={inner}
onMouseEnter={this.onMouseEnterHandler}
onMouseLeave={this.onMouseLeaveHandler} >
{this.props.children}
</div>
</div>
);
}
});
var outer = {
height: '120px',
width: '200px',
margin: '100px',
backgroundColor: 'green',
cursor: 'pointer',
position: 'relative'
}
var normal = {
position: 'absolute',
top: 0,
bottom: 0,
left: 0,
right: 0,
backgroundColor: 'red',
opacity: 0
}
var hover = {
position: 'absolute',
top: 0,
bottom: 0,
left: 0,
right: 0,
backgroundColor: 'red',
opacity: 1
}
React.render(
<Hover></Hover>,
document.getElementById('container')
)
Have you tried any of these?
onMouseDown onMouseEnter onMouseLeave
onMouseMove onMouseOut onMouseOver onMouseUp
SyntheticEvent
it also mentions the following:
React normalizes events so that they have consistent properties across different browsers.
The event handlers below are triggered by an event in the bubbling phase. To register an event handler for the capture phase, append Capture to the event name; for example, instead of using onClick, you would use onClickCapture to handle the click event in the capture phase.
The previous answers are pretty confusing. You don't need a react-state to solve this, nor any special external lib. It can be achieved with pure css/sass:
The style:
.hover {
position: relative;
&:hover &__no-hover {
opacity: 0;
}
&:hover &__hover {
opacity: 1;
}
&__hover {
position: absolute;
top: 0;
opacity: 0;
}
&__no-hover {
opacity: 1;
}
}
The React-Component
A simple Hover Pure-Rendering-Function:
const Hover = ({ onHover, children }) => (
<div className="hover">
<div className="hover__no-hover">{children}</div>
<div className="hover__hover">{onHover}</div>
</div>
)
Usage
Then use it like this:
<Hover onHover={<div> Show this on hover </div>}>
<div> Show on no hover </div>
</Hover>
you can use onMouseOver={this.onToggleOpen} and onMouseOut={this.onToggleOpen} to muse over and out on component
Note: This answer was for a previous version of this question where the question asker was trying to use JavaScript to apply css styles… which can simply be done with CSS.
A simple css-only solution.
For applying basic styles, CSS is simpler and more performant that JS solutions 99% of the time. (Though more modern CSS-in-JS solutions — eg. React Components, etc — are arguably more maintainable.)
Run this code snippet to see it in action…
.hover-button .hover-button--on,
.hover-button:hover .hover-button--off {
display: none;
}
.hover-button:hover .hover-button--on {
display: inline;
}
<button class='hover-button'>
<span class='hover-button--off'>Default</span>
<span class='hover-button--on'>Hover!</span>
</button>
If you can produce a small demo showing the onMouseEnter / onMouseLeave or onMouseDown / onMouseUp bug, it would be worthwhile to post it to ReactJS's issues page or mailing list, just to raise the question and hear what the developers have to say about it.
In your use case, you seem to imply that CSS :hover and :active states would be enough for your purposes, so I suggest you use them. CSS is orders of magnitude faster and more reliable than Javascript, because it's directly implemented in the browser.
However, :hover and :active states cannot be specified in inline styles. What you can do is assign an ID or a class name to your elements and write your styles either in a stylesheet, if they are somewhat constant in your application, or in a dynamically generated <style> tag.
Here's an example of the latter technique: https://jsfiddle.net/ors1vos9/
I've just bumped into this same problem when listening for onMouseLeave events on a disabled button. I worked around it by listening for the native mouseleave event on an element that wraps the disabled button.
componentDidMount() {
this.watchForNativeMouseLeave();
},
componentDidUpdate() {
this.watchForNativeMouseLeave();
},
// onMouseLeave doesn't work well on disabled elements
// https://github.com/facebook/react/issues/4251
watchForNativeMouseLeave() {
this.refs.hoverElement.addEventListener('mouseleave', () => {
if (this.props.disabled) {
this.handleMouseOut();
}
});
},
render() {
return (
<span ref='hoverElement'
onMouseEnter={this.handleMouseEnter}
onMouseLeave={this.handleMouseLeave}
>
<button disabled={this.props.disabled}>Submit</button>
</span>
);
}
Here's a fiddle https://jsfiddle.net/qfLzkz5x/8/
I'd use onMouseOver & onMouseOut. Cause in React:
The onMouseEnter and onMouseLeave events propagate from the element being left to the one being entered instead of ordinary bubbling and do not have a capture phase.
Here it is in the React documentation for mouse events.
A package called styled-components can solve this problem in an ELEGANT way.
Reference
Glen Maddern - Styling React Apps with Styled Components
Example
const styled = styled.default
const Square = styled.div`
height: 120px;
width: 200px;
margin: 100px;
background-color: green;
cursor: pointer;
position: relative;
&:hover {
background-color: red;
};
`
class Application extends React.Component {
render() {
return (
<Square>
</Square>
)
}
}
/*
* Render the above component into the div#app
*/
ReactDOM.render(<Application />, document.getElementById('app'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react-dom.min.js"></script>
<script src="https://unpkg.com/styled-components/dist/styled-components.min.js"></script>
<div id='app'></div>
You can't with inline styling alone. Do not recommend reimplementing CSS features in JavaScript we already have a language that is extremely powerful and incredibly fast built for this use case -- CSS. So use it! Made Style It to assist.
npm install style-it --save
Functional Syntax (JSFIDDLE)
import React from 'react';
import Style from 'style-it';
class Intro extends React.Component {
render() {
return Style.it(`
.intro:hover {
color: red;
}
`,
<p className="intro">CSS-in-JS made simple -- just Style It.</p>
);
}
}
export default Intro;
JSX Syntax (JSFIDDLE)
import React from 'react';
import Style from 'style-it';
class Intro extends React.Component {
render() {
return (
<Style>
{`
.intro:hover {
color: red;
}
`}
<p className="intro">CSS-in-JS made simple -- just Style It.</p>
</Style>
}
}
export default Intro;
Use Radium!
The following is an example from their website:
var Radium = require('radium');
var React = require('react');
var color = require('color');
#Radium
class Button extends React.Component {
static propTypes = {
kind: React.PropTypes.oneOf(['primary', 'warning']).isRequired
};
render() {
// Radium extends the style attribute to accept an array. It will merge
// the styles in order. We use this feature here to apply the primary
// or warning styles depending on the value of the `kind` prop. Since its
// all just JavaScript, you can use whatever logic you want to decide which
// styles are applied (props, state, context, etc).
return (
<button
style={[
styles.base,
styles[this.props.kind]
]}>
{this.props.children}
</button>
);
}
}
// You can create your style objects dynamically or share them for
// every instance of the component.
var styles = {
base: {
color: '#fff',
// Adding interactive state couldn't be easier! Add a special key to your
// style object (:hover, :focus, :active, or #media) with the additional rules.
':hover': {
background: color('#0074d9').lighten(0.2).hexString()
}
},
primary: {
background: '#0074D9'
},
warning: {
background: '#FF4136'
}
};
I had a similar issue when onMouseEnter was called but sometimes the corresponding onMouseLeave event wasn't fired, here is a workaround that works well for me (it partially relies on jQuery):
var Hover = React.createClass({
getInitialState: function() {
return {
hover: false
};
},
onMouseEnterHandler: function(e) {
this.setState({
hover: true
});
console.log('enter');
$(e.currentTarget).one("mouseleave", function (e) {
this.onMouseLeaveHandler();
}.bind(this));
},
onMouseLeaveHandler: function() {
this.setState({
hover: false
});
console.log('leave');
},
render: function() {
var inner = normal;
if(this.state.hover) {
inner = hover;
}
return (
<div style={outer}>
<div style={inner}
onMouseEnter={this.onMouseEnterHandler} >
{this.props.children}
</div>
</div>
);
}
});
See on jsfiddle: http://jsfiddle.net/qtbr5cg6/1/
Why was it happening (in my case): I am running a jQuery scrolling animation (through $('#item').animate({ scrollTop: 0 })) when clicking on the item. So the cursor doesn't leave the item "naturally", but during a the JavaScript-driven animation ... and in this case the onMouseLeave was not fired properly by React (React 15.3.0, Chrome 51, Desktop)
I know It's been a while since this question was asked but I just run into the same issue of inconsistency with onMouseLeave()
What I did is to use onMouseOut() for the drop-list and on mouse leave for the whole menu, it is reliable and works every time I've tested it.
I saw the events here in the docs: https://facebook.github.io/react/docs/events.html#mouse-events
here is an example using https://www.w3schools.com/bootstrap/bootstrap_dropdowns.asp:
handleHoverOff(event){
//do what ever, for example I use it to collapse the dropdown
let collapsing = true;
this.setState({dropDownCollapsed : collapsing });
}
render{
return(
<div class="dropdown" onMouseLeave={this.handleHoverOff.bind(this)}>
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example
<span class="caret"></span></button>
<ul class="dropdown-menu" onMouseOut={this.handleHoverOff.bind(this)}>
<li>bla bla 1</li>
<li>bla bla 2</li>
<li>bla bla 3</li>
</ul>
</div>
)
}
I personally use Style It for inline-style in React or keep my style separately in a CSS or SASS file...
But if you are really interested doing it inline, look at the library, I share some of the usages below:
In the component:
import React from 'react';
import Style from 'style-it';
class Intro extends React.Component {
render() {
return (
<Style>
{`
.intro {
font-size: 40px;
}
`}
<p className="intro">CSS-in-JS made simple -- just Style It.</p>
</Style>
);
}
}
export default Intro;
Output:
<p class="intro _scoped-1">
<style type="text/css">
._scoped-1.intro {
font-size: 40px;
}
</style>
CSS-in-JS made simple -- just Style It.
</p>
Also you can use JavaScript variables with hover in your CSS as below :
import React from 'react';
import Style from 'style-it';
class Intro extends React.Component {
render() {
const fontSize = 13;
return Style.it(`
.intro {
font-size: ${ fontSize }px; // ES2015 & ES6 Template Literal string interpolation
}
.package {
color: blue;
}
.package:hover {
color: aqua;
}
`,
<p className="intro">CSS-in-JS made simple -- just Style It.</p>
);
}
}
export default Intro;
And the result as below:
<p class="intro _scoped-1">
<style type="text/css">
._scoped-1.intro {
font-size: 13px;
}
._scoped-1 .package {
color: blue;
}
._scoped-1 .package:hover {
color: aqua;
}
</style>
CSS-in-JS made simple -- just Style It.
</p>
Hover is a CSS feature; it comes with the CSS side of the app so do it the right way is so much fun. Simply put, when I require a hover effect on an element in the React app, first, I create a class in my CSS file and then I add the created class into the className of the element. The steps I follow are:
Create a CSS file unless you have index.css
Create a class with a hover pseudo-class enabled
.hover__effect:hover {}
Add the effects you require
.hover__effect:hover {
background-color: rgb(255, 255, 255);
color: rgb(0, 0, 0);
}
Then add the hover__effect to the class's component that should be different when the mouse pointer hovers over it
Hover
Please check my sandbox for a live demo.
I want to change a less variable on client side.
Say I have a less file
#color1: #123456;
#color2: #color1 + #111111;
.title { color: #color1; }
.text { color: #color2; }
I want that user yo pick a color and change the value of #color1 and recompile css without reloading the page.
Basically I'm looking for a js function, something like this
less_again({color1: '#ff0000'})
Marvin,
I wrote a function that does exactly what you're looking for, last night.
I have created a fork on Github;
https://github.com/hbi99/less.js/commit/6508fe89a6210ae3cd8fffb8e998334644e7dcdc
Take a look at it. Since this is a recent addition, I'd like to hear your comments on the addition. This solution fits my needs perfectly and I think it will do the same for you.
Here is a basic sample;
Sample LESS:
#bgColor: black;
#textColor: yellow;
body {background: #bgColor; color: #textColor;}
From JS:
less.modifyVars({
'#bgColor': 'blue',
'#textColor': 'red'
});
The creator of less.js added some features that should allow you to do something like this. Read the comments and the answers here: Load less.js rules dynamically
This less:
#color1: #123456;
#color2: #color1 + #111111;
.title { color: #color1; }
.text { color: #color2; }
compiles to this CSS and this is all the browser knows about:
.title { color: #123456; }
.text { color: #234567; }
So, now you're effectively saying you want to change dynamically to this:
.title { color: #ff0000; }
You can do that by reaching into the existing stylesheet with JS and changing the rule for .title. Or, you can define an alternate rule in your original CSS:
.alternate.title { color: #ff0000; }
And, find all the objects with .title and add .alternate to them. In jQuery, this would be as simple as:
$(".title").addClass(".alternate");
In plain JS, you'd need to use a shim to provide getElementsByClassName in a cross browser fashion and then use:
var list = document.getElementsByClassName("title");
for (var i = 0, len = list.length; i < len; i++) {
list[i].className += " alternate";
}