reactjs : i am trying to make a small scollbar - css

i am trying to make a small scollbar in react js in css it works only when given like this scrollbar-width: thin; but react does not supported "-" so i used like below but its not working the scroll bar is appearing i cant use inline or class styling
const styles = {
module: {
height: "30rem",
overflowY: "scroll",
scrollbarWidth: "thin", // this doesnot work
},
}

Try this way: push CSS code to another file then import that to react page.

Related

styled-components - Parent component style overriding child style

I'm using styled-components with React. I'd like to remove the default bottom margin for all <p>s, so in my main App component I added a nested selector:
const App = styled.div`
p {
margin: 0;
}
`
However, I do want to be able to add margin to some <p>s, e.g.:
const SpacedP = styled.p`
margin-bottom: 10px;
`
But when I try to use a <SpacedP> within <App>, the resulting App CSS is more specific than the SpacedP CSS, so my <SpacedP>s still have no margin! (App CSS compiles to ${App} p { ... }, while SpacedP only has one prefix, ${SpacedP} { ... }).
Is there a common pattern for situations like these? I don't really like the &&& specificity workaround suggested here, seems ugly and hacky; hoping there's a more common setup that I'm missing.
Thanks!

DetailsList Component with custom scrollbar

At the following link is the basic implementation of DetailsList with Sticky (fixed header).
What I'm trying to achieve is to replace default scrollbar with custom scrollbar and to keep the same functionality/behavior.
After implementation of custom scrollbar header is not sticky and that's the main problem.
Working example CodeSandbox.
I tried the following libraries:
ReactCustomScrollbars,
OverlayScrollbars.
Using an external library to handle the styling of the scrollbars probably wraps your content in a div and causes position: sticky to stop working.
Probably your best bet is to try to style the scrollbars in the ScrollablePane directly. Something like:
const sbWidth = 6;
const sbHeight = 6;
const sbBg = "pink";
const sbThumbBg = "red";
<ScrollablePane
styles={{
root: {
selectors: {
// Firefox
".ms-ScrollablePane--contentContainer": {
scrollbarWidth: sbWidth,
scrollbarColor: `${sbThumbBg} ${sbBg}`
},
// Chrome, Edge, etc
".ms-ScrollablePane--contentContainer::-webkit-scrollbar": {
width: sbWidth,
height: sbHeight
},
".ms-ScrollablePane--contentContainer::-webkit-scrollbar-track": {
background: sbBg
},
".ms-ScrollablePane--contentContainer::-webkit-scrollbar-thumb": {
background: sbThumbBg
}
}
}
}}
>
You can of course add more customizations.
Didn't test on Firefox but should work.
CodeSanbox: https://codesandbox.io/s/fluet-ui-custom-scrollbars-ygm07?file=/src/index.tsx
Styling scrollbars: https://css-tricks.com/the-current-state-of-styling-scrollbars/

Applying CSS stylesheet only to active component

I'm working on a ReactJS app that has a header at the top, a menu on the left, and the "frame" in the middle is where routes and their corresponding components are loaded. I want to be able to apply a CSS stylesheet to specific components only when they are loaded. I also don't want them applied all the time or to the top header or left menu.
My expectation was that adding import 'custom.css'; to a specific component would only apply the stylesheet's styles to that component and it's children when the route is active. Instead, it applies it to the entire page even when the route/component are not loaded.
I understand that an alternative approach is styled components, but, for my use-case, a design company is supplying a stylesheet (which should remain unchanged) that we need to consume only for the sub-module I'm working on and I don't want its styles to affect the rest of the app.
How can I have a stylesheet only applied to my active route/component?
Use simple CSS technique. Suppose you have two components with different css files (say about.css and contact.css). Now consider your both CSS file have one common class with different style properties, like:
about.css
.container{
max-width: 400px;
}
contact.css
.container{
max-width: 500px;
}
Yes in ReactJS both the CSS files will load at the same time and will override any one of the style. so to solve this problem add class to differentiate this styles, like:
about.css
.about-component.container{
max-width: 400px;
}
contact.css
.contact-component.container{
max-width: 500px;
}
If you want apply only when the component is mounted, you can use the lifecycle.
The follow example is based in the idea you are using sass, React, sass-node and have the loaders into webpack.
<pre>
import React from 'react';
import './styles.scss';
class MyComponent {
constructor(props) {
super(props);
this.state = { className: '' }
}
componentDidMount() {
this.setState({
className: 'myOwnClass'
});
}
render(){
return (
<div className={this.state.className}>This is a example</div>
);
}
}
export default myComponent;
</pre>
To be able to only call that specific CSS when you need it you can use CSS Modules. You may need to update your version of react.
When saving your CSS file save it with a ".module.css" eg. "styles.module.css". The CSS in these files can only be used and accessed by hte components where are they are imported. As stated in a tutorial from W3Schools.
Let's say this is your CSS code in styles.module.css:
.container {
color: white;
}
.cont-child {
background-color: red;
}
Then in your JS file you can import the CSS file like this if the JS and CSS files are in the same directory. Make sure you point to the correct path.
import styles from './styles.module.css'
Then in your HTML section you can use it like this:
class Home extends React.Component {
render() {
return(
<main className={ styles.container } >
<div className={ styles["cont-child"]} >
Some div text about something...
</div>
</main>
);
}
}
I currently use both ways to access the selectors, since the styles variable acts like an object. I placed both of them here because the second option is capable of fetching selectors named like "btn-active". Which comes in handy in some situations. Camelcasing is considered cleaner though.
Please note: I originally posted this answer as a reply to a similar question here React CSS - how to apply CSS to specific pages only
I want to be able to apply a CSS stylesheet to specific components
only when they are loaded.
Why not apply the styles inline via React.js?
Step 1. Create the style object for the component:
var componentOneStyle = {
color: 'white',
backgroundColor: 'red'
};
Step 2. Populate the component's style attribute with the style object:
ReactDOM.render(<div style={componentOneStyle}>This is Component One</div>, mountNode);

vue binding value based on media query

carousel-3d(:display="3", :width="150", :height="150")
I want to set the attribute bindings based on a media query
e.g.
display should become 5 when screen width > 960px
You could try binding the display value to a component property:
<carousel-3d :display="display">
...and then update that property on window resize:
...
data() {
return {
display: 3
}
},
methods: {
onResize() {
if (window.innerWidth > 960) {
this.display = 5
} else {
this.display = 3
}
}
},
created() {
window.addEventListener('resize', this.onResize)
},
beforeDestroy() {
window.removeEventListener('resize', this.onResize)
},
...
I struggled to find any solutions with Vuejs alone myself or if at all that are there, are already too complex. Involves a lot of unnecessary work where things can be done neatly and in CSS.
That solution is styled components or for a matter of fact any CSS in JS solutions to handle such things with ease.
For example in styled components your styles are written inside ES6 template literal.
import styled from 'styled-components';
import breakpoint from '../utils/breakpoint.js';
const YourStyledComponent = styled.div`
width: calc(100% - 30px);
#media (min-width: ${breakpoint.SM}px) {
// Your media styles
}
`;
Then inside your Vue component use it as a normal component. You can pass it props as well. Do read more about it - Vue-styled-components.
Doing this way you are using just CSS for styling everything. It's a must for front-end development considering the performance. I think it's a long time since we stopped adding eventListeners to Javascript related to styling or handling layout.

Setting size of dialogue in angularjs

Folks I am using the ui.bootstrap.dialog module.
My question is how do I set the size of the modal window.
I have tried the following but it doesn't work as intended:
$scope.viewopts = {
dialogClass: 'dialogsize',
dialogOpenClass:'dialogsize',
templateUrl: 'template/view-add-dialogue.tpl.html',
controller: 'CustomViewModalCtrl',
resolve: {
headerlist: $scope.data
}
};
Where the class dialogsize is defined as in my css file:
.dialogsize {
width: 800px;
height: 600px
}
Can anyone assist me to solve this ?
This shouldn't have anything to do with angularJS, since it just leverages the modal from twitter bootstrap. You just need to override the default value of dialog's size in twitter bootsrap:
https://github.com/twbs/bootstrap/blob/f95ab89fb1da85ff0fcb95c43d4fe4af359e302a/less/modals.less#L130
Regarding the question you ask about customized version of dialog, you can look into its API. We can use our own dialog, which means you can add custom class with css you want.
https://github.com/angular-ui/bootstrap/tree/master/src/dialog

Resources