I am using React and splitting CSS with each Component.
and I want to extract CSS from these files.
// ComponentA.js
import "./ComponentA.css"
export default class ComponentA extends React.Component {
...
}
// ComponentB.js
import "./ComponentB.css"
export default class ComponentB extends React.Component {
...
}
// index.js
import ComponentA from "./ComponentA"
import ComponentB from "./ComponentB"
class App extends React.Component {
render() {
return (
<div>
<ComponentA />
<ComponentB />
</div>
)
}
}
in this case, how can i extract and bundle ComponentA.css and ComponentB.css
without transpile whole JS sources?
You need to use extract-text-plugin to do this. It will bundle your css to one file.
read more about this plugin
Related
Looking for help to troubleshoot this.
When I try to create a card on the UI using kendo, it works on stackblitz:
https://stackblitz.com/edit/5zvomp--run?file=app/app.component.ts
but when trying to create in my angular app, it doesnt show up properly. There are no errors in the console and import { LayoutModule } from '#progress/kendo-angular-layout'; is also there.
html template:
<kendo-card class="user-card">
<kendo-card-header class="k-hbox">
<div>
<h1 kendoCardTitle>Turtle</h1>
<p kendoCardSubtitle>Turtle is a small animal</p>
</div>
</kendo-card-header>
</kendo-card>
angular component:
import { Component, OnInit, Input } from '#angular/core';
import * as faEllipsisH from '#fortawesome/pro-regular-svg-icons/faEllipsisH';
#Component({
selector: 'user-card',
templateUrl: './user-card.component.html',
styleUrls: ['./user-card.component.css']
})
export class UserCardComponent implements OnInit {
#Input() public card: any;
public faEllipsisH = faEllipsisH;
public constructor() { }
public ngOnInit(): void {
}
}
The only way that I was able to replicate this was if you did not import the Kendo-UI stylesheet.
Take a look at this example: https://stackblitz.com/edit/angular-pnudiu?file=index.html
If you uncomment out the commented line in index.html, you get the properly styled card. For more information on how to include the styling and themes, visit this documentation: https://www.telerik.com/kendo-angular-ui/components/styling/#toc-including-themes-by-using-precompiled-css
import {createStyles, WithStyles} from "#material-ui/core";
const styles = (theme: Theme) => createStyles({
root: {}
});
interface MyProps extends WithStyles<typeof styles> {
}
export class MyComponent extends Component<MyProps> {
constructor(props: MyProps) {
super(props);
console.log(props.classes); // why this is undefined?
}
}
Why props.classes is undefined?
You can send props to component like where you calling
<MyComponent classes={.. Any thing you want to pass here ...} />
Finally got it working by "decorating" my class like this
export const MyComponent = withStyles(styles)(
class extends Component<MyProps> {
...
}
)
Then you can use the styles like this
<div className={this.props.classes.root}>
I have a child component needs to use spectre.css, but when I import spectre.css in child component, parent component also got affected. How can I make spectre.css only apply to the child component? Thanks
Parent Component:
class ParentComponent extends React.Component{
render(){
return <ChildComponent></ChildComponent>
}
}
In Child component,
import from 'spectre.css'
class ChildComponent extends React.Component{
/* ... */
}
most probably your css is bundled in one single file.
You can add className to your components, to differentiate them.
you can create your styles inside your component
const styles= {
wrapper: {
color: red,
},
};
class ChildComponent extends React.Component{
/* ... */
render() {
return (<div style={styles.wrapper}> </div>
}
}
or you can try css-in-js libraries such as emotion or styled-components
I'm using react and I found this awesome library that helps you define css classes for components called classNames.
I'm also using the webpack css-loader in order to import css into my component and when trying to use classNames with import css I get a syntax error.
Here is my example:
import React from 'react';
import styles from './style.css';
import classNames from 'classnames';
export default class Menu extends React.Component {
render() {
let style = classNames({
styles.someClass: true
});
}
}
How can I use both?
You can use the computed properties syntax of ES6/2015, for example:
import React from 'react';
import styles from './style.css';
import classNames from 'classnames';
export default class Menu extends React.Component {
render() {
const style = classNames({
// This is a computed property, i.e. surrounded by []
[styles.someClass]: true
});
}
}
But that is just for a single class, in these simple cases you could just do something like:
const style = this.state.active ? styles.someClass : '';
The classNames library is especially useful when combining multiple classes, like so:
import React from 'react';
import styles from './style.css';
import classNames from 'classnames';
export default class Menu extends React.Component {
render() {
const style = classNames(
// add as many classes or objects as we would like here
styles.foo,
styles.bar,
{ [styles.someClass]: this.props.active }
);
}
}
I'm just starting to learn Meteor with React using es6, and I'm having trouble understanding this.props. Where does it come from? I don't have any code where I define it for the class myself. Thank you in advance.
This is a portion of my code in simple-todos/imports/ui/App.jsx:
import React, { Component, PropTypes } from 'react';
import { createContainer } from 'meteor/react-meteor-data';
import ReactDOM from 'react-dom';
import { Tasks } from '../api/tasks.js';
import Task from './Task.jsx';
class App extends Component {
renderTasks() {
return this.props.tasks.map((task) => (
<Task key={task._id} task={task} />
));
}
}
This props contains the properties that are passed to the component upon creation. E.g:
<SomeComponent someProperty={'foo'} />
Now inside SomeComponent you can now access someProperty as this.props.someProperty
Read more about using props here.
It allows you to make more "arbitrary" components. For example, say you have a list that fetches from a server.
export default class List extends Component {
static propTypes = {
data: PropTypes.array.isRequired
}
render() {
return (
//you can now be sure that the proptypes are what you wanted them to be.
)
}
}
That way, you can just pass the array of data to this component
<List data={users} />