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 }
);
}
}
Related
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'm using create react app and I need to assign props values to a styles of the component. In this case background image 'url' is need to pass as props to styles.
index.js
import React from "react";
import ReactDOM from "react-dom";
import Background from "./background";
import "./styles.css";
function App() {
return (
<div className="App">
<Background source="./assets/image.jpg" />
</div>
);
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
background.js
import React from "react";
const styles = {
backgroundImage: "url()"
};
export default class Background extends React.Component {
render() {
return <div style={styles.background} />;
}
}
Find the code on below link:
codcodesandbox example
you can create style object and update the component style prop with it like so:
render() {
const style = {
backgroundImage:`url(${this.props.image})`
}
return <div style={style} />;
}
check this code update
I am using react-tooltip, react-emotion.
I cannot figure out how to style the span in order to override default styles.
Here's what I've got so far:
import React, { PureComponent } from 'react';
import styled from 'react-emotion';
const myTooltip = (Wrapper, toolTip) => {
class TooltipWrap extends PureComponent {
render() {
return (
<span
data-tip={toolTip}
data-delay-show="250"
data-place="bottom"
className={TooltipStyle}
>
<Wrapper
{...this.props}
/>
</span>
);
}
}
return TooltipWrap;
};
export default withToolTip;
const TooltipStyle = styled.span ({
color: 'red !important';
fontSize: '48px !important';
})
Anyone have any tips or a specific definitive guide on how to style this span so I can override the defaults in react-tooltip?
The documentation is pretty spotty, and there's literally no examples anywhere on the web.
I ran into a similar issue but was able to override the default styles using styled components and passing it the ReactTooltip component
import React, { PureComponent } from 'react';
import styled from 'react-emotion';
import ReactTooltip from 'react-tooltip';
const myTooltip = (Wrapper, toolTip) => {
class TooltipWrap extends PureComponent {
render() {
return (
<span
data-tip={toolTip}
data-delay-show="250"
data-place="bottom"
>
// Replace ReactTooltip component with styled one
<ReactTooltipStyled type="dark" />
<Wrapper
{...this.props}
/>
</span>
);
}
}
return TooltipWrap;
};
export default withToolTip;
export const ReactTooltipStyled = styled(ReactTooltip)`
&.place-bottom {
color: red;
font-size: 48px;
}
`;
Using this method all you would need to do is import the newly styled component into your React file and replace the original ReactTooltip with the ReactTooltipStyled component.
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
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} />