Although not a major issue, there is something that bothers me. I am currently using react, typescript, and css modules along with . The problem arises when styling material ui components as I find myself needing to use !important quite frequently. Is there a way to create styles without relying on important? I have created a sample project to showcase this issue: https://github.com/halkar/test-css-modules
material-ui offers a variety of components for styling, and there are two approaches to achieving this.
One way is to define styles globally and apply them to the theme. Here's an example taken from the documentation http://www.material-ui.com/#/customization/themes:
import React from 'react';
import {cyan500} from 'material-ui/styles/colors';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import getMuiTheme from 'material-ui/styles/getMuiTheme';
import AppBar from 'material-ui/AppBar';
const muiTheme = getMuiTheme({
palette: {
textColor: cyan500,
},
appBar: {
height: 50,
},
});
class Main extends React.Component {
render() {
return (
<MuiThemeProvider muiTheme={muiTheme}>
<AppBar title="My AppBar" />
</MuiThemeProvider>
);
}
}
export default Main;
In the above example, the AppBar component has a height of 50px, which means every instance of the AppBar component will have that height when styled with the muiTheme. You can find a list of available styles for each component here.
For individual component styling, you can use the style attribute to pass specific styles.
Here's another example from the documentation where a margin of 12px is applied to a RaisedButton:
import React from 'react';
import RaisedButton from 'material-ui/RaisedButton';
const style = {
margin: 12,
};
const RaisedButtonExampleSimple = () => (
<div>
<RaisedButton label="Default" style={style} />
<RaisedButton label="Primary" primary={true} style={style} />
<RaisedButton label="Secondary" secondary={true} style={style} />
<RaisedButton label="Disabled" disabled={true} style={style} />
<br />
<br />
<RaisedButton label="Full width" fullWidth={true} />
</div>
);
export default RaisedButtonExampleSimple;
You can define styles in the same file or import them from a separate file for component usage.
If you need to apply multiple styles, you can use the spread operator like so: style={{...style1,...style2}}. Make sure to check the component properties for available style options to customize different parts of the component.
Refer to the component properties and global style properties for styling guidance. This should assist you in applying the desired styles effectively!
In order to properly manage the styling of my components, I realized that using JssProvider would be essential. By instructing it to place Material UI styles before mine in the head section, I can ensure a consistent look and feel throughout the application.
import JssProvider from 'react-jss/lib/JssProvider';
import { create } from 'jss';
import { createGenerateClassName, jssPreset } from 'material-ui/styles';
const generateClassName = createGenerateClassName();
const jss = create(jssPreset());
// To establish a custom insertion point for injecting styles into the DOM,
jss.options.insertionPoint = document.getElementById('jss-insertion-point');
function App() {
return (
<JssProvider jss={jss} generateClassName={generateClassName}>
...
</JssProvider>
);
}
export default App;
It is necessary to utilize the component API's in order to apply styles to imported components from libraries using CSS, especially if the component has specific API's for styling.
*Update
import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from 'material-ui/styles';
import Button from 'material-ui/Button';
const styles = {
root: {
background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)',
borderRadius: 3,
border: 0,
color: 'white',
height: 48,
padding: '0 30px',
boxShadow: '0 3px 5px 2px rgba(255, 105, 135, .30)',
},
label: {
textTransform: 'capitalize',
},
};
function Classes(props) {
return (
<Button
classes={{
root: props.classes.root, // class name, e.g. `classes-root-x`
label: props.classes.label, // class name, e.g. `classes-label-x`
}}
>
{props.children ? props.children : 'classes'}
</Button>
);
}
Classes.propTypes = {
children: PropTypes.node,
classes: PropTypes.object.isRequired,
};
export default withStyles(styles)(Classes);
Currently engaged in using Next.js and Sanity as a Headless CMS for the backend. In the code snippet below, I have created a Categories.js file in the components folder to fetch some data. My objective is to extract all the titles from the category Array. ...
Check out my website at When viewing on smaller screens like mobile devices, I'm facing issues with my carousel images overlapping the navbar. Any suggestions on how to keep them below the navbar? Also, the third image appears shorter in length compa ...
I am currently working on a custom ToggleButton that changes its text based on certain state changes. However, I am facing an issue where the width of the button abruptly grows when the text changes. How can I smoothly transition this change in width? Bel ...
In a certain scenario, I need to display an error message when a user clicks on the Next button without agreeing to the terms. To achieve this, I am looking to write a unit test case using Jest and React Testing Library. How can I go about doing this? im ...
One of my tasks is to set a default value based on the previous selection in the Userlevel dropdown. The value will be determined by the Username selected, and I need to dynamically update the default value label accordingly. For example, if "dev_sams" is ...
I recently integrated the react-leaflet-markerclusters package into my project. However, upon installation and running npm start, an error has surfaced: loadMessages.js?4a62:4 Uncaught TypeError: iterable.hasOwnProperty is not a function at traverse (l ...
I am working with a component that utilizes the draft-js library for text editing. import React, { Component } from 'react' import { EditorState, convertToRaw } from 'draft-js' import { Editor } from 'react-draft-wysiwyg' imp ...
I'm trying to align two images vertically using CSS' display: table-cell property, but it doesn't seem to be working even after specifying the height. <div style='display: table;height:500px'> <div style=' displa ...
Currently, I am in the process of developing a user interface for a menu that looks something like this: I am exploring different implementation methods for this design. In this project, I am utilizing Bootstrap framework. The main container is a containe ...
I created an Ionic 2 app with tabs using the following command: ionic starts project1 tabs --v2 Next, I added a new page and provider to the project: ionic g provider authService ionic g page loginPage After a successful login, I set the root to the Ta ...
Although this may not be directly related to programming, I have been unable to locate any information regarding the compatibility of IE 9 or even 8 with the Display Tag Library. The documentation is silent on the matter. If anyone has encountered any cha ...
Wow, what a name. I am struggling to come up with a better title given my current state. The problem at hand is as follows: When using React, I set the state to null during componentWillMount. This state is then updated after data is fetched from a serve ...
Currently, I am facing a challenge with my code where I need to loop through a hard-coded data set to determine the distance from a user-entered location using Google's web API. The issue lies in passing an ID variable down through the code so that I ...
Is there a way to make the CSS margin: top; on my HTML main_content element relative to the browser window? I want the main_content to always stay at the bottom of the browser window. How can I achieve this? I attempted the following code, but it didn&apo ...
There's something strange about the way this CSS is being used, and I can't quite wrap my head around it. .tablecontainer table { ... } I'm familiar with table.tablecontainer, which indicates that the class attribute is equal to "table ...
My goal is to use react to console.log the input value. Below is the code I've created: import React from 'react'; import ReactDOM from 'react-dom'; class App extends React.Component{ constructor() { super(); this.proce ...
Whenever I try to type on the modal with 2 textareas, it stops and exits the textarea. The issue seems to be with onChange={event => setTitle(event.target.value)}, but I'm not sure how to fix it. <Modal.Body> <form onSub ...
If my original .d.ts definition file is like this: main.d.ts: declare module myMod { } Now, let's say I want to separate out the security definitions into another file but keep them under the same module. Here's what I'm thinking: main. ...
Currently, my goal is to retrieve an object based on the parameter being passed in. I came across a similar question that almost meets my requirements. TypeScript function return type based on input parameter However, I want to enhance the function's ...
Recently, I have been analyzing student data and noticed a recurring structure. While preparing to present information on student performance within the discipline, I also became interested in showcasing a history of new students. It was suggested that hav ...