Is there a class name convention used in material ui library? I'm currently using material-ui-next. I notice class names like "MuiFormControl-root-124" all over the place with numbers appended to class name. For Paper element "MuiPaper-root-18 MuiPaper-shadow2-22 MuiPaper-rounded-19". I just can't see a pattern here.
Is there a convention which I'm missing. It would be easier to understand this framework if it made sense like Bootstraps grid classes. All help much appreciated. Thank you.
In material-ui v1, class names are non-deterministically generated at run time, so there is no convention you should adhere to. That's described here in the docs:
You may have noticed that the class names generated by our styling solution are non-deterministic, so you can't rely on them to stay the same.
However, that does not matter because you should never be using raw CSS class names in the first place. Instead, you use withStyles to set the appropriate styles for each component:
import { withStyles } from 'material-ui/styles';
// Define the CSS styles you which to apply to your component
const styles = {
root: {
backgroundColor: 'red',
},
};
class MyComponent extends React.Component {
render () {
// withStyles automatically provides the classes prop, which
// will contain the generated CSS class name that you can match
// to your component
return <div className={this.props.classes.root} />;
}
}
export default withStyles(styles)(MyComponent);
These non-deterministic class names have technical benefits, including improved performance:
Thanks to the non-deterministic nature of our class names, we can implement optimizations for development and production. They are easy to debug in development and as short as possible in production.
You should note that this happens because material-ui takes a fundamentally different approach to styling than a library like Bootstrap. While Bootstrap has a CSS library with defined class names that get applied to each element, material-ui uses CSS in JS to inject styling. This allows CSS to be defined and stored alongside the JavaScript definition of each component.
Related
I'm working on a NextJs project and I've seen 2 ways of importing css classes from a .module.scss file.
Option 1:
import * as styles from './page.module.scss';
Classes used like this:
<div className={styles.myClass} />
Option 2:
import {myClass} from './page.module.scss';
Classes used like this:
<div className={myClass} />
I've always used option 2, as it looks much cleaner to just write the class name in the render instead of having loads of 'styles.' everywhere.
However i've come to learn that option 2 does not work with storybook for some reason? In order to get it to work, I have to write this as a workaround:
import styles from './page.module.scss';
const { myClass } = styles;
So i'm wondering, what is the difference between the 2 on a functional level?
On a code basis, there is no difference between the two. Both involve destructuring the objects during importation.
I'm very new to React and I'm trying to make a simple application that renders html controls.
I want to have an API that return array of json objects contains properties that determine the type and the value of each control like id, type, value ... etc.
Let's say that I have some controls like Input and Button.
What I'm thinking of is Creating a base class named HtmlControl that extends React.Component and other html controls should extend from the HtmlControl and finally a class for rendering these controls.
How can I be able to render the controls that extends only HtmlControl class ?
That would not be a good choice as react says you should not focus inheritance rather focus on containment or composition.
React has a powerful composition model, and we recommend using composition instead of inheritance to reuse code between components.
and
At Facebook, we use React in thousands of components, and we haven't found any use cases where we would recommend creating component inheritance hierarchies.
Props and composition give you all the flexibility you need to customize a component's look and behavior in an explicit and safe way. Remember that components may accept arbitrary props, including primitive values, React elements, or functions.
Please Visit this link to learn more.
You can create separate classes for each of the components or elements and combine them in one class like this:
import Button from './Button'
import Radio from './Radio'
import TextInput from './TextInput'
class HtmlComponent{
// note: we don't need to extend it from React.Component
// we will some function to render them.
renderTextInput() { <TextInput /> }
renderRadio() { <Radio /> }
}
// you can now use below code:
const hC = new HtmlComponent();
hC.renderTextInput();
Note Again this is not a nice idea to do but you can achieve your goal.
How can I use my own class names when using CSS and Style loaders? I'm using React and i often get confused with all the class names and the related components. If it is not recommended to keep the class names, how can I organize my code in a manner that it don't get messy?
You can use normal classNames and then import the relative .css file that has the style for those classes. Something like this:
MyComponent.js
...
import '/path/to/css/style.css'
...
render() {
return(<div className="MyComponent">Hello</div>);
}
...
style.css
...
.MyComponent {
width: 100px;
background-color: red;
...
}
...
And this would work just fine, with this approach though you are in charge of naming your classes and making sure there are no collisions and everything is named properly (you can then follow BEM techinque or others as you prefer).
Otherwise there are other approaches that I am not gonna explain into details because the relative docs are great and don't need any addition.
You can use Css Modules or Styled Components. There is also this article that has a good overview of these methods and can help you out make a final decision.
I have a question,
I am working on a project which is written in react.
Everything is based on component in react so based on my understanding everything including css files should be defined in a related component itself this way if we remove the component from the project every related file will be removed so far so good.
However consider this case:
.size{
font-size:20px;
}
as you can see there are many cases as above which can be used in different components. So we want to put all the css files into the related components then we should either replicate the same css definition in different places or for these kind of scenarios we can have a shared folder out of the components. Is there any rule or guideline how to structure the css files in a react project in the right way?
I'm not sure if there is any established way to organized shared css but let me offer some observations.
If you have an App component that imports an App.css. Any of the components used within this app will have access to the class's set in App.css.
// app.css
.test {
color: red;
}
// app.js
import './app.css';
class App extends Component {
render() {
return (
<App>
<MyComponent />
</App>
);
}
}
// my-component.js
class MyComponent extends Component {
render() {
<div className='test'>
this text is red.
</div>
}
}
If you have a css file imported in MyComponent that has a style that conflicts with the one passed from App then the MyComponent style will replace ALL uses of the style.
To put in short, it doesn't matter where your css lives. Putting css into the same place as components is just way we try to keep things organized but at the end of the day the whole app has access to all css. And from the example we can tell that latter definitions of the style replace earlier definitions.
In the multiple compenents section of the Angular 2 Quickstart tutorial, a component is extracted out of the previous AppComponent in order to make it more reusable and easier to test.
Run the live example.
A user can click on a list of Heroes and a detailed view will appear below the list.
The components:
AppComponent (List of Heroes)
HeroDetailComponent (Display details once a hero is selected)
Both of which import the Hero class:
export class Hero {
id: number;
name: string;
}
In the AppComponent's template, hero is a target property:
<my-hero-detail [hero]="selectedHero"></my-hero-detail>
The selectedHero source property is set once a user clicks on a listed hero.
So far, so good.
Now, the problem is that I'm not understanding the purpose of #Input in the HeroDetailComponent class:
export class HeroDetailComponent {
#Input()
hero: Hero;
}
If #Input() is omitted, it seems the hero property is never set. How does #Input() know where to get the hero property from? Why is this statement required and not just automatically called when a directive has a target property?
It is not obvious to me and it seems that I may be missing the bigger picture.
#Input is a decorator. This is more of an TypeScript thing.
From the TypeScript Documentation:
With the introduction of Classes in TypeScript and ES6, there now exist certain scenarios that require additional features to support annotating or modifying classes and class members. Decorators provide a way to add both annotations and a meta-programming syntax for class declarations and members. Decorators are a stage 1 proposal for JavaScript and are available as an experimental feature of TypeScript.
I recommend you reading the official documentation about this for example here.
It probably will help you understanding the purpose.
As i understand it in the most basic way is that you can think of a decorator as a keyword which expects a statement next to it or in the next line / lines. The decorator will call a previously defined function with the statement.
Hope this helps.
The input is the counterpart of [hero]= of
<my-hero-detail [hero]="selectedHero"></my-hero-detail>
The line above passes selectedHero of the current component to the #Input() hero:hero of the <my-hero-detail> component which I assume is implemented by HeroDetailComponent (didn't check the link).