I want to get a similar scrollbar to youtube in MUI v5 that supports both light and dark themes. I have seen several answers for this but I am confused how to do it for all browsers and in the best possible way. Some answers only work for certain browsers or use MUI v4.
There was one answer on StackOverflow that showed almost what I wanted, but the issue with this is it is hard-coding the colors into the code - which means it is the same in dark and light mode. I want it to be dynamic based on the theme and look like the youtube scrollbar (with a transparent background)
Please tell me the best possible way to do this in MUI v5.
I found another answer which did support theme aware scrollbar, but I am not sure how to integrate that into my code. The way I am doing theming is I first create a base theme with all the style changes/overrides then I create two themes based on that: light and dark (I am not sure if this is the best way to handle it - if not, please feel free to correct my code below).
const theme = createTheme({
components: {
MuiCssBaseline: {
styleOverrides: {
body: {
scrollbarColor: "#6b6b6b #2b2b2b",
"&::-webkit-scrollbar, & *::-webkit-scrollbar": {
backgroundColor: "#2b2b2b",
},
"&::-webkit-scrollbar-thumb, & *::-webkit-scrollbar-thumb": {
borderRadius: 8,
backgroundColor: "#6b6b6b",
minHeight: 24,
border: "3px solid #2b2b2b",
},
"&::-webkit-scrollbar-thumb:focus, & *::-webkit-scrollbar-thumb:focus":
{
backgroundColor: "#959595",
},
"&::-webkit-scrollbar-thumb:active, & *::-webkit-scrollbar-thumb:active":
{
backgroundColor: "#959595",
},
"&::-webkit-scrollbar-thumb:hover, & *::-webkit-scrollbar-thumb:hover":
{
backgroundColor: "#959595",
},
"&::-webkit-scrollbar-corner, & *::-webkit-scrollbar-corner": {
backgroundColor: "#2b2b2b",
},
},
},
},
},
});
const lightTheme = createTheme({ ...theme, palette: { mode: "light" } });
const darkTheme = createTheme({ ...theme, palette: { mode: "dark" } });
export { lightTheme, darkTheme };
Again, the issue with my code above is that it is not theme aware
Related
I'm trying really hard to change the css for the .MuiDataGrid-window in MatierialUi DataGrid.
Therefore I was following css rules from https://material-ui.com/api/data-grid/
I tried it within createMuiTheme for root it was working fine, but not for window. I also tried a lot of different cominations like MuiDataGrid-window or only 'MuiDataGrid-window' directly under overrides, but nothing worked..
export const theme = createMuiTheme({
overrides: {
MuiDataGrid: {
root: {
backgroundColor: 'red',
},
window: {
width: '120%',
},
},
}
});
Next try was a styled DataGrid component, which also didn't work out.
Both didn't work. A styled component would be my prefered way!
const StyledDataGrid = styled(DataGrid)({
MuiDataGrid: {
root: {
backgroundColor: 'green',
},
window: {
width: '120%',
}
}
});
Maybe I'm completely on the wrong way.. But how to style the CSS attributes in MUI's API like .MuiDataGrid-mainGridContainer, .MuiDataGrid-overlay, .MuiDataGrid-columnsContainer, .MuiDataGrid-colCellWrapper etc.
Thanks a lot and maybe it is helpful for somebody else :)
If you check the styles applied, window class element has two selectors associated (multiple classes):
.MuiDataGrid-root .MuiDataGrid-window
To apply the styles in children elements, such as, window in grid root, you need to select both of them:
MuiDataGrid: {
root: {
backgroundColor: 'red',
'& .MuiDataGrid-window': {
backgroundColor: 'green'
}
}
}
In documentation the grid component have just one rule name: root
all,
I'm trying to make tailwinds backgroundImage solution work, and I found help for many other tailwindcss problems here or on github, but not for this.
It's not a complicated task, but still doesn't work.
So as in the documentation, I want to create 2 simple background image to use for multiple viewsize.
It is stated in the documentation https://tailwindcss.com/docs/background-image "By default, only responsive variants are generated for background image utilities."
It means, without any further configuration on variants, I should be able to use it for this purpose.
Here is how my tailwind.conf.js looks like (important part is at the end):
const plugin = require('tailwindcss/plugin')
module.exports = {
purge: [
"./pages/**/*.vue",
"./components/**/*.vue",
"./plugins/**/*.vue",
"./static/**/*.vue",
"./store/**/*.vue"
],
theme: {
extend: {
minHeight: {
'120': '30rem',
},
height: {
'15': '3.75rem',
'17': '4.25rem',
'7': '1.75rem',
'75': '18.75rem',
},
width: {
'15': '3.75rem',
open: '11.875rem',
'75': '18.75rem',
},
margin: {
'7': '1.75rem',
'17': '4.25rem',
'27': '6.75rem',
},
padding: {
'7': '1.75rem',
},
borderWidth: {
'5': '5px',
},
fontSize: {
'5xl': '3.375rem',
'xxl': '1.375rem',
},
boxShadow: {
'lg': '0px 0px 10px #00000033',
'xl': '0px 0px 20px #00000080',
},
gap: {
'7': '1.75rem',
},
inset: {
'10': '2.5rem',
'11': '2.75rem',
'17': '4.25rem',
'1/2': '50%',
},
backgroundImage: {
'hero-lg': "url('/storage/img/sys/lg-hero.jpg')",
'hero-sm': "url('/storage/img/sys/sm-hero.jpg')",
},
}
},
variants: {
opacity: ['group-hover'],
backgroundOpacity: ['group-hover'],
},
plugins: []
}
Just to make sure I included the full content.
And this is how the html looks like:
<div class="bg-hero-sm lg:bg-hero-lg h-24 w-24">
potato
</div>
<div class="h-24 bg-gradient-to-r from-orange-400 via-red-500 to-pink-500"></div>
As I said, nothing special, "npm run dev" finishes witout any error...but if I inspect the element, I cannot see anything related to any background parameter in css. Even the example from documentation doesn't work, which should have to provide a gradient block.
I don't think it's important info, but I use tailwind with laravel.
Can anyone help me with that? I'm desperate, and I'm trying to make it work for days :(I can do workaround using css code in my sass file, but I want to use tailwinds own solution)
Thank you all in advance!
I was having this issue in TailwindCSS 2.2.7 My issue was that my syntax was wrong.
tailwindcss.config.js:
theme: {
backgroundImage: {
'pack-train': "url('../public/images/packTrain.jpg')",
},
App.js
<div className="rounded-lg shadow-lg mb-2 h-screen bg-pack-train flex flex-col sm:mx-8"></div>
The ' and " are critical. For some reason eslint was going in and "cleaning" those characters up on save, which was making it not work. Also, the ../ leading the url was also critical.
If you don't want to extend your theme in the tailwindcss.config.js and want to add the background image directly to your div you can try:
<div className="bg-[url('../public/assets/images/banner.svg')]">
This is the simplest way to get background images working.
Reference: Check under Arbitrary values heading
The background image functionality of tailwindcss has been released in version 1.7.0.
I tested your code in my development environment and it didn't work either since I also had an earlier version of tailwindcss. After upgrading to the latest version, your code has worked fine.
editing your tailwind.config.js
module.exports = {
theme: {
extend: {
backgroundImage: theme => ({
'hero-pattern': "url('/img/hero-pattern.svg')",
'footer-texture': "url('/img/footer-texture.png')",
})
}
}
add name and the URL for your image and use it.
example bg-hero-pattern
u need to add (theme) props to your config
like this:
backgroundImage: (theme) => {
'hero-lg': "url('/storage/img/sys/lg-hero.jpg')",
'hero-sm': "url('/storage/img/sys/sm-hero.jpg')",
},
or url with "../" like this
backgroundImage: (theme) => {
'hero-lg': "url('../storage/img/sys/lg-hero.jpg')",
'hero-sm': "url('../storage/img/sys/sm-hero.jpg')",
},
Hope it works :)
In ^3.1.8 version image path was not working. Then I just put "../" instead of "./"
and it worked. Example:
extend: {
backgroundImage: {
'hero-pattern': "url('../src/assets/images/bg.png')",
}
}
I had to specify a height for my image to be displayed
<div className="h-screen bg-hero"/>
For static image[set is background image] works for me.
First import the image from the static image folder.
import m5 from '../Assets/a2.avif'
Then use it like this.
<div style={{ backgroundImage: `url(${m5})` }}>
module.exports = {content: ["./src/**/*.{html,js}"],theme: {extend{},backgroundImage: {"hero-lg": "url('/src/assets/images/bg.png')","hero-sm": "url('/src/assets/images/bg.png')",},},
class="hero-content bg-hero-sm lg:bg-hero-lg flex-col lg:flex-row-reverse"
I would like to ask if there is any way to use different themes with tailindcss.
Imagine your site has 2 themes - dark and light.
I have a button:
<button class="px-4 bg-blue over:bg-grey-100">Register</button>
This is for the ligth theme.
Is it possible to change the design of the button depending on the theme.
For example in the body i have class: "theme-light" or "theme-dark".
Is it possible to change the classes of the button to apply only for one of the themes.
Something like that theme-dark:bg-orange:
<button class="px-4 bg-blue over:bg-grey-100 theme-dark:bg-orange">Register</button>
If not is there any way to have different themes without writing custom css, or completely rewriting my html pages for the given theme.
If not what's the best way to have 2 or more themes?
Thank you.
It is achievable to have theme-dark and theme-light variants by creating pseudo-class variants. It is detaily described here: https://tailwindcss.com/docs/pseudo-class-variants/#creating-custom-variants
For example, to create theme-dark pseudo-class variant you can do something like this in your tailwind.config.js file:
// tailwind.config.js
const plugin = require('tailwindcss/plugin')
module.exports = {
plugins: [
plugin(function({ addVariant, e }) {
addVariant('theme-dark', ({ modifySelectors, separator }) => {
modifySelectors(({ className }) => {
return `.${e(`theme-dark${separator}${className}`)}:theme-dark`
})
})
})
]
}
You can learn more about this here as well: https://tailwindcss.com/docs/plugins/#adding-variants
However, to achieve what you want, you will need to have some javascript behavior that will have a state from which will be able to tell when it is theme-light and when it is theme-dark, which means this is not achievable with 100% only tailwind.
Also Adam Wathan created quick them of this here: https://github.com/adamwathan/theming-tailwind-demo
I hope this answers your question.
The tw-colors plugin does what you want, the big advantage is that you don't need to use variants.
tailwind.config.js
const { createThemes } = require('tw-colors');
module.exports = {
content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
plugins: [
createThemes({
halloween: {
'primary': 'orange',
'secondary': 'yellow',
},
summer: {
'primary': 'pink',
'secondary': 'red',
},
winter: {
'primary': 'blue',
'secondary': 'green',
},
party: {
'primary': 'steelblue',
'secondary': 'darkblue',
},
})
],
};
use themes like this with class:
<html class='theme-halloween'>
...
</html>
Or with data attributes:
<html data-theme='halloween'>
...
</html>
Themes can be switched dynamically with some toggle button or whatever you prefer
I am trying to customise the DateTimePicker from Material-UI. Here is its documentation: https://material-ui-pickers.dev/api/DateTimePicker
There is no section for the styling. I want to change the main color for all the coloured components. What I've tried so far is using the general theme documentation and try to change the style of the theme:
const theme = createMuiTheme({
status: {
danger: '#FF72B1',
},
dateTimePicker: {
headerColor: '#FF72B1',
selectColor: '#FF72B1',
},
datePicker: {
selectColor: '#FF72B1',
headerColor: '#FF72B1'
}
});
function App() {
return (
<ThemeProvider theme={theme}>
<Routes />
</ThemeProvider>
)
}
As far as I understood from the theme documentation, the only thing that I've done so far is defining variables with styles, but they are not going to be applied. I have to specify them in the exact component, and here comes the tricky part.
In my Material-UI DateTimePicker:
function MaterialDateTimePicker() {
const classes = useStyles()
return (
<Fragment>
<DateTimePicker
label={label}
inputVariant="outlined"
value={value}
onChange={onChange}
classes={{
root: classes.root,
checked: classes.checked,
}}
/>
</Fragment>
);
}
I have tried to applied the styling:
const useStyles = makeStyles(theme => ({
root: {
color: '#FF72B1',
backgroundColor: 'orange',
'& > .MuiPickerDTToolbar-toolbar.MuiToolbar-root': {
backgroundColor: 'green'
}
},
checked: {},
}));
This is how I've been trying to style components with this library, based on research, reading the docu, and some SO answers:
How to change material UI select border and label
So basically you have to go to the documentation, try to find the .XXX class that matches the component that you want to customise, and if documentation is missing, you have to go to the DOM, and start looking for this class.
I did that, but I have a couple of questions:
1) In my particular case, I have the problem that on my DateTimePicker I apply the root classes, which are on the input component level. The calendar that pops up, is not a children of this component, it's open by javascript, therefore I don't know how to access it.
This syntax does not work any longer:
root: {
color: '#FF72B1',
backgroundColor: 'orange',
'& > .MuiPickerDTToolbar-toolbar.MuiToolbar-root': {
backgroundColor: 'green'
}
},
Because root is the input, not the calendar that pop ups.
2) Is this really the way to go with this library? Because all the answers on SO and complains go on this direction. Does anybody know another strategy?
3) In #material-ui/pickers node_modules folder I couldn't find the css file. I would like to pick it and customise there, like it's possible for react-dates library etc. Is that possible? Where are the css stylings?
I've prepared a sandbox with what I've tried:
https://codesandbox.io/s/inspiring-napier-zh4os
(Unfortunately the utils library is installed but not working, locally in my computer the picker works fine, I just can't style it)
I'm working with this right now, wat i did to partially override the styles is to wrap in a ThemeProvider (you can pass your theme trow your component)
<MuiPickersUtilsProvider locale={deLocale} utils={DateFnsUtils}>
<Grid container justify="space-around">
<ThemeProvider theme={defaultMaterialTheme}>
<KeyboardDatePicker
...
/>
</ThemeProvider>
</Grid>
</MuiPickersUtilsProvider>
And your theme could be something, like this
import { createMuiTheme } from '#material-ui/core'
const defaultMaterialTheme = createMuiTheme({
overrides: {
MuiPickersCalendarHeader: {
switchHeader: {
color: '#6A148E',
textTransform: 'uppercase',
},
dayLabel: {
textTransform: 'uppercase',
},
},
MuiPickersDay: {
day: {
color: '#707070',
},
daySelected: {
backgroundColor: '#6A148E',
'&:hover': {
backgroundColor: '#6A148E',
},
},
current: {
color: '#6A148E',
},
},
MuiSvgIcon: {
root: {
fill: '#6A148E',
},
},
MuiOutlinedInput: {
root: {
'&:hover': {
border: '10px solid red !important', // i'm struggling with this :/
},
},
},
},
})
export default defaultMaterialTheme
Hope it's help
I think you just need to cancel out the webkit appearance. There are a couple of ways to cancel out specific webkit styles (so you can add your own).
Try the following:
-webkit-appearance: none;
ReactJS inline styles: webkitAppearance: "none";
Also check out other -webkit-[] functions... There are functions for more specific elements such as borders, colours, etc...
Hope this helps :)
I created custom Gutenberg block for social links but I would need to add input fields where user can paste the url to that social profile. Here is where I would like to put the field (same as paragraph block has alignment settings there for example):
This is my code for the block:
const { registerBlockType } = window.wp.blocks;
const { __ } = window.wp.i18n;
const { BlockControls, AlignmentToolbar} = window.wp.editor;
registerBlockType('social-block/social', {
title: __('Social'),
icon: 'smiley',
category: 'common',
attributes: {
content: {type: 'string'},
color: {type: 'string'}
},
edit: function (props) {
return React.createElement(
"div",
{style: {
display: 'flex',
justifyContent: 'center'
}},
// facebook
React.createElement(
'a',
{
'href': '',
'rel': 'noopener noreferrer',
'target': '_blank'
},
React.createElement(
'svg',
{
'xmlns': "http://www.w3.org/2000/svg",
'xmlns:xlink': "http://www.w3.org/1999/xlink",
'viewBox': "0 0 24 24",
'fill': "currentColor",
'width': "48px",
'height':"48px"
},
React.createElement(
'path',
{
'fill-rule': "evenodd",
'd': "M12 22C6.477 22 2 17.523 2 12S6.477 2 12 2s10 4.477 10 10-4.477 10-10 10zm3-11.762h-1.703V9.2c0-.39.278-.48.474-.48h1.202V7.005L13.318 7c-1.838 0-2.255 1.278-2.255 2.096v1.142H10v1.765h1.063V17h2.234v-4.997h1.508L15 10.238z"
}
)
),
),
}
});
I tried implementing https://developer.wordpress.org/block-editor/tutorials/block-tutorial/block-controls-toolbars-and-inspector/ but its not the behavior that I need, anyone has a suggestion where to look or what to do?
First of all I will recommend you to use the ES6 syntax as it will make your code a lot easier. For ES6 whenever you see any code in WordPress docs then you can choose ESNEXT tab from top of snippet that will then shows you ES6 code.
Now your answer. Gutenberg provides us two kind of controls BlockControl and InspectorControl both of these provides you the way to manipulate your block but the difference is that BlockControl is a toolbar that appears on top of block (its the same link that you shared) while InspectorControls serves as a sidebar setting option the thing that you wanted to do. Here is the actual documentation of Inspector Controls and here is one working example from Image block of Gutenberg core.