I'm thinking to do it like the following, but I'm not sure if this is the recommended way to do it:
import * as React from "react"
import { withStyles, createStyles, Theme } from "#material-ui/core"
import CssBaseline from "#material-ui/core/CssBaseline"
// global styles for a Mapper app
class MyCssBaseline extends React.Component {
render() {
return <CssBaseline />
}
}
export default withStyles(styles)(MapperCssBaseline)
function styles(_theme: Theme) {
return createStyles({
"#global": {
fontSize: 12,
// ... custom styles here ...
}
})
}
Is this how? Or is there a more recommended way?
I managed to do it with overrides when creating theme
export const theme: Theme = createMuiTheme({
overrides: {
MuiCssBaseline: {
'#global': {
svg: {
maxWidth: '100%',
maxHeight: '100%',
},
},
},
},
})
Related
I have the following:
cont theme = createTheme({
typography: {
allVariants: MetricFontFaces,
fontFamily: 'MetricHPEXS'
} as TypographyOptions,
components: {
MuiFormControl: {
styleOverrides: {
root: {
fontFamily: 'MetricHPEXS'
}
}
},
MuiInput: {
styleOverrides: {
root: {
fontFamily: 'MetricHPEXS'
},
formControl: {
fontFamily: 'MetricHPEXS'
},
input: {
fontFamily: 'MetricHPEXS'
}
}
},
MuiOutlinedInput: {
styleOverrides: {
input: {
fontFamily: 'MetricHPEXS'
}
}
}
}
});
Then I try to use it like this in my storybook:
<StyledEngineProvider injectFirst>
<ThemeProvider theme={theme}>
{story()}
<TextField value="sdasdasd" />
</ThemeProvider>
</StyledEngineProvider>
The custom font-family is not applying.
How do I properly create the MUI v5 theme such that all components will accept the same custom font?
In the end, we applied the font settings directly onto the MuiCssBaseline in order to have everything else pick up the font-family. Example:
import { TypographyOptions } from '#mui/material/styles/createTypography';
export const muiThemeOptions = {
typography: {
fontFamily: 'MetricHPEXS'
} as TypographyOptions,
components: {
MuiCssBaseline: {
styleOverrides: MetricFontFaces // <== here
},
...
}
}
Where MetricFontFaces is a giant string with all of the #font-face defined. While this worked on applying the font globally, but because MetricFontFaces is a string, we couldn't apply other CSS styling easily. There is no simple way (at least I could not find them) to supply #font-face via the MuiCssBaseline.
I'm trying to remove the outline that appears when you focus on a cell in Material UI's DataGrid component.
None of these methods work:
const useStyles = makeStyles((theme) => ({
// Method 1:
'#global': {
'.MuiDataGrid-cell:focus': {
outline: 0,
},
},
// Method 2:
cell: {
'& .MuiDataGrid-cell:focus': {
outline: 0,
},
},
// Method 3:
cell: {
':focus': { outline: 0 },
},
const classes = useStyles()
const dataGridColumns: GridColumns = [
{
...other,
cellClassName: classes.cell,
}]
Edit:
'#global': {
'.MuiDataGrid-root .MuiDataGrid-cell:focus': {
outline: 0,
},
},
worked for me, but I would prefer not to use a global css adjustment.
You can modify the MuiDataGrid-cell class by using Material UI's useStyles() function like the following (no need to declare globally):
import { makeStyles } from '#material-ui/core/styles';
import { DataGrid } from '#material-ui/data-grid';
const useStyles = makeStyles({
root: {
'&.MuiDataGrid-root .MuiDataGrid-cell:focus': {
outline: 'none',
},
}
});
const MyComponent = () => {
const classes = useStyles();
return (
<DataGrid
className={classes.root}
// ...other table setup props
/>
);
}
export default MyComponent;
Resources:
https://material-ui.com/styles/advanced/#with-material-ui-core
https://material-ui.com/api/data-grid/#css
https://github.com/mui-org/material-ui-x/issues/420
Edit: Updated for 4.0.0-alpha.29
const useStyles = makeStyles({
root: {
'&.MuiDataGrid-root .MuiDataGrid-columnHeader:focus, &.MuiDataGrid-root .MuiDataGrid-cell:focus': {
outline: 'none',
},
}
});
Just for completion sake this is how I styled the DataGrid with styled components and it worked.
const StyledDataGrid = styled(DataGrid)`
&.MuiDataGrid-root .MuiDataGrid-columnHeader:focus,
&.MuiDataGrid-root .MuiDataGrid-cell:focus {
outline: none;
}
`;
If you're using MUI >= 5, you can simply do the follow:
<DataGrid
sx={{
"&.MuiDataGrid-root .MuiDataGrid-cell:focus-within": {
outline: "none !important",
},
}}
...
/>
const useStyles = makeStyles(
() => createStyles({
root: {
'& .MuiDataGrid-columnHeader:focus-within, & .MuiDataGrid-cell:focus-within': {
outline: 'none',
},
'& .MuiDataGrid-columnHeader:focus, & .MuiDataGrid-cell:focus': {
outline: 'none',
},
},
}),
);
I just needed to do this as well for a project I'm working on.
You can override many of the classes used by the datagrid, but you'll need to make sure that the selector being used is more specific in order for it to take precedence.
Many of their classes are documented here in the CSS section.
The below snippet worked for me.
const useStyles = makeStyles((theme) => ({
root: {
"& .MuiDataGrid-root": {
"& .MuiDataGrid-colCell:focus": {
outline: "none"
},
},
},
}));
The perfect way for me was add this code to your css file:
.MuiDataGrid-root .MuiDataGrid-columnHeader,
.MuiDataGrid-root .MuiDataGrid-cell {
outline: none !important;
}
I found that if we set it just for :focus, then if we click to a button of cell, outline still visible
We need to attach a custom plugin to vue-chart. Please guide us how to implement on the same
import { Line, mixins } from 'vue-chartjs'
export default {
namespaced: true,
extends: Line,
props: ['chartData', 'options'],
mounted() {
this.renderChart(this.chartData, this.chartData.options)
}
}
This is how we are using the line chart of Vue-chart. How to attach the plugin here
https://blog.larapulse.com/javascript/creating-chart-js-plugins
We want to try this. But since we are using vue-chart which internally uses chart.js. Need some help to attach the plugin. please guide us
I want to apply some background color to the chart for one specific column in the chart
vue-chart-js provide method to attach plugins. Use this way:
import the plugin
import ChartDataLabels from 'chartjs-plugin-datalabels';
then, call addPlugin in mounted
mounted() {
this.addPlugin(ChartDataLabels);
this.renderChart(
this.chartData,
this.options,
);
}
Below is PieChart.vue script in case you create pie chart :
<script>
import { Pie, mixins } from 'vue-chartjs';
import ChartDataLabels from 'chartjs-plugin-datalabels';
Chart.plugins.unregister(ChartDataLabels);
const { reactiveProp } = mixins;
export default {
extends: Pie,
mixins: [reactiveProp],
props: {
options: {
type: Object,
default: null,
},
},
mounted() {
this.addPlugin(ChartDataLabels);
this.renderChart(
this.chartData,
this.options,
);
},
};
</script>
Using the annotation plugin for Chart.js as example, you can use the addPlugin function to attach it:
import { Line, mixins } from 'vue-chartjs'
import chartjsPluginAnnotation from "chartjs-plugin-annotation"
export default {
namespaced: true,
extends: Line,
props: ['chartData', 'options'],
mounted() {
//Arguments is an Array of Plugins (https://vue-chartjs.org/api/#addplugin)
this.addPlugin([chartjsPluginAnnotation]),
this.renderChart(this.chartData, this.chartData.options)
}
}
After this just pass the plugin's options on your component as usual. In this case, if you wanted to draw a vertical line, it would be something like this:
computed: {
chart() {
return {
chartData: {
labels: this.data.labels,
datasets: [
{
label: "Score",
data: this.data.data
}
],
options: {
annotation: {
annotations: [
{
type: "line",
mode: "vertical",
scaleID: "x-axis-0",
borderColor: "#4ecca3",
value: parseInt(this.data.line),
borderDash: [4, 4],
label: {
content: this.data.line,
enabled: true,
position: "top",
xAdjust: 15,
backgroundColor: '#4ecca3',
fontSize: 10,
}
}
]
}
},
}
};
}
import chartjsPluginAnnotation from "chartjs-plugin-annotation";
And:
mounted() {
Chart.plugins.register(chartjsPluginAnnotation);
this.addPlugin(chartjsPluginAnnotation);
this.renderChart(this.chartData, this.options);
}
I am trying to apply some styles when a material-ui form control gets focus.
The pseudo-class 'hover' works well in the code below but 'focus' does not.
I am assuming that clicking into the Input component gives it focus but that does not seem to work. Any idea why and how to make it work?
import withStyles from "#material-ui/core/styles/withStyles"
import Input from "#material-ui/core/Input"
import InputLabel from "#material-ui/core/InputLabel"
import FormControl from "#material-ui/core/FormControl"
const styles = theme => ({
root: {
border: "1px solid",
borderRadius: theme.shape.borderRadius,
borderColor: "rgba(0, 0, 0, 0.23)",
marginBottom: theme.spacing.unit * 2,
padding: theme.spacing.unit,
width: "100%",
display: "flex",
flexDirection: "row",
alignItems: "center",
"&:focus": {
backgroundColor: "blue"
}
}
})
class TagsComponent extends React.Component {
render() {
return (
<FormControl variant="outlined">
<InputLabel>Tags</InputLabel>
<Input
disableUnderline
classes={{
root: this.props.classes.root
}}
/>
</FormControl>
)
}
}
export default withStyles(styles)(TagsComponent)
You can apply styles by overriding styles for input or override class name focused
const styles = {
...,
focused: {
backgroundColor: "green"
},
input: {
"&:focus": {
backgroundColor: "blue",
color: "white"
}
}
}
<Input
disableUnderline
classes={{
root: classes.root,
focused: classes.focused,
input: classes.input
}}
/>
Sandbox example https://codesandbox.io/embed/gallant-pascal-rh8jc
I am trying to learn react-native, I just start working on this project two days ago.
I have kind of confusing in how to get the all the image shots from dibbbler API and display it on my android emulator.
This is what I have done,
'use strict';
import React, {
AppRegistry,
Component,
Image,
ListView,
StyleSheet,
View,
} from 'react-native';
var API_URL = 'https://api.dribbble.com/v1/shots';
class myproject extends Component {
constructor(props) {
super(props);
this.state = {
dataSource: new ListView.DataSource({
rowHasChanged: (row1, row2) => row1 !== row2,
}),
loaded: false,
};
}
componentDidMount() {
this.fetchData();
}
fetchData() {
fetch(API_URL)
.then((response) => response.json())
.then((responseData) => {
this.setState({
dataSource: this.state.dataSource.cloneWithRows(responseData.images.treaser),
loaded: true,
});
})
.done();
}
render() {
return (
<ListView
dataSource={this.state.dataSource}
renderRow={this.rendershots}
style={styles.listView}
/>
);
}
rendershots(shots) {
return (
<View style={styles.container}>
<Image
source={{uri: shots.images.treas}}
style={styles.images.treas}
/>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
rightContainer: {
flex: 1,
},
treas: {
width: 53,
height: 81,
},
listView: {
paddingTop: 20,
backgroundColor: '#F5FCFF',
},
});
AppRegistry.registerComponent('myproject', () => myproject);
You need to provide credentials to retrieve the pictures from dribble.
You can register your app here to get credentials then use them to use the Dribbble API.