Trying to address all h1 elements in a child component but the class styling bubbles up to address all h1 elements in entire DOM. How restrict styling to component to which stylesheet is imported?
```
import React, { Component } from "react";
import "../styles/principlesInAoL.css";
export default class PrinciplesInAoL extends Component {
render() {
return <h1>Principles in Areas of Life</h1>;
}
}
```
& Beginning of parent component code:
```
import React, { Component } from "react";
import AoLDescription from "./aoLDescription";
import MetaPrinciple from "./metaPrinciple";
import "../styles/principles.css";
import PrinciplesInAol from "./principlesInAoL";
export default class Principles extends Component {
render() {
```
Thanks for the help.
Any css you add that defines styles by a tagname will apply to every element in the dom with that tagname, so in your case, adding a class name to the <h1/> is probably the best option.
In the PrinciplesInAoL component
import React, { Component } from "react";
import "../styles/principlesInAoL.css";
export default class PrinciplesInAoL extends Component {
render() {
return <h1 className="principlesInAoL-h1">Principles in Areas of Life</h1>;
}
}
and in principlesInAoL.css, add a definition for that class:
.principlesInAoL-h1{
/* your styles here */
}
ReactJS has no view encapsulation (in contrast to Angular). So in order to make CSS rule much stricter you should use CSS selector with higher specificity.
Related
I'm new to Rect. I'd like to ask perhaps a most basic question since I can't find the relavent documentation or a answer on Google.
Following is the first 3 lines of typical react code:
import React, { Component } from "react";
import {
Button,
Modal,
} from "reactstrap";
export default class CustomModal extends Component {
...
}
What is the connection between Bootstrap componments imported on the second line from reactstrap and the Component class in react(that is, react.Component)? Why a CustomModal subclass from react.Component instead of reactstrap.Modal? is react.Component a sort of abstract class and reactstrap.Modal concret class extending react.Component?
Basically, yes. You extend React.Component to create your own custom class-based React components. The others that you are importing are from libraries where the library author has already created the components. Note that you can also create custom function-based React components where you don't extend React.Component. I would recommend reading through the React.Component documentation.
To your question about how it relates to CustomModal, you would use Modal as a component within CustomModal. For example:
import React, { Component } from "react";
import {
Button,
Modal,
} from "reactstrap";
export default class CustomModal extends Component {
...
render() {
return <Modal />;
}
}
Note that this example is just to give you the idea of how to use an imported component in your own custom component. It is not necessarily how to use reactstrap.Modal itself.
Below is a screen shot of my package size from Next JS. What I want to point out is the react-color components under node_modules. I am importing them this way:
import { GithubPickerProps, GithubPicker, AlphaPicker } from 'react-color';
But you see it includes all the things I'm not using such as photoshop.js, sketch.js, etc.
How do I get it not to bundle the things I'm not using with tree shaking?
I did notice that import { debounce } from 'lodash'; imported all of lodash but import debounce from 'lodash/debounce'; reduced the package size by 200kB.
In order for the tree-shaking to work properly react-color should add module property to the package.json which will point to esm version of the lib.
Since it doesn't have it, you will need import directly.
Before:
import React from 'react'
import SketchPicker from 'react-color'
class Component extends React.Component {
render() {
return <SketchPicker />
}
}
After:
import React from 'react'
import SketchPicker from 'react-color/lib/Sketch'
class Component extends React.Component {
render() {
return <SketchPicker />
}
}
I am writing jest unit tests for a React Stateless Functional Component (SFC) that is inside a Higher Order Component (HOC). How do I use TestUtils to find a specific class in the SFC?
Specifically, my SFC/HOC looks like:
import React from 'react'
import sizeMe from 'react-sizeme';
const MyClass = ({myText, size}) => {
return (
<div className="MyClassName">{myText}</div>
);
};
export default sizeMe()(MyClass);
Here note that MyClass is a SFC and I am embedding it inside of the HOC sizeMe from the package react-sizeme.
The test I am trying to do is:
import React from 'react';
import ReactDOM from 'react-dom';
import TestUtils from 'react-addons-test-utils';
import MyClass from './src/views/MyClass.js'
import Wrap from '../src/views/Wrap'
describe('<MyClass />, () => {
it('can haz my text', () => {
const myClass = TestUtils.renderIntoDocument(
<Wrap>
<MyClass myText={'my text'} />
</Wrap>
);
const myText = TestUtils.findRenderedDOMComponentWithClass(myClass,'MyClassName').innerHTML;
expect(myText).toEqual('myText');
});
});
In this test I am using the utitlity class Wrap that I would normally use to test SFCs:
import React from 'react';
class Wrap extends React.Component {
render() {
return <div>{this.props.children}</div>
}
}
My test fails because TestUtils.findRenderedDOMComponentWithClass cannot find MyClass. I get the message "Did not find exactly one match (found: 0) for class:MyClass"
How can I retrieve MyClass? I would most prefer to use React's TestUtils, but I am open to other approaches if that is not possible.
To get this to work, it is necessary export/import the non-HOCed component. This required 3 changes. First the export keyword should be added to the definition of MyComponent.
export const MyClass = ...
The second change is how MyClass is imported. Since the HOCed MyClass is the default export, exporting the non-HOCed version requires all exports from MyClass.js to be imported as
import * as MC from './src/views/MyClass.js
Finally, the non-HOCed component can now be in the test as
<MC.MyClass myText={'my text'} />
Because the default export was not changed, the HOCed component will still be used in a regular import so no changes to the other parts of the application will be required.
I'm using the package react-translate to localise my app.
import React from 'react';
import { translate } from 'react-translate';
class Hello extends React.Component {
render() {
return (
<div>
{this.props.t('test_string')}
</div>
);
}
}
export default translate('Hello')(Hello);
In the snippet above, translate is a High Order Component, that adds the function t to the properties of Hello.
Everything works fine but lint keeps complaining because t is not in the propTypes.
error 't' is missing in props validation react/prop-types
Is that normal? I guess I'm doing something wrong but I cannot tell what...
Edit:
As #stevejay says, I could add the t to my propTypes but I don't like this solution because - from my total ignorance in react - 1) t is not a property of the component itself, nor something I want to manually pass and 2) I have to add the property to all the models where I have already added the HOC and it seems redundant
To silence the linter, you need to just add propTypes to your Hello component:
import React from 'react';
import PropTypes from 'prop-types';
import { translate } from 'react-translate';
class Hello extends React.Component {
...
}
Hello.propTypes = {
t: PropTypes.func.isRequired
}
Any props that a component you create uses should be declared in that way.
I am using Material UI next branch i want to use the table component and i want to change the style of the TableHead Component.
My idea was to wrap the TableHead with MyTableHead and add my own style to override the current style.
my code(based on this Composition):
import React from 'react';
import injectSheet from 'react-jss'
import {
TableHead,
} from 'material-ui/Table';
const styles = {
th: {
fontSize:'20px',
},
}
const _MyTableHead = (props) => {
return (
<TableHead className={props.classes.th} {...props}>
{props.children}
</TableHead>
);
};
_MyTableHead.muiName = 'TableHead'
const MyTableHead = injectSheet(styles)(_MyTableHead);
export {MyTableHead}
This does not work:
1. my style is overrided by the original style
2. i get an error in the browser js console:
Warning: Unknown props sheet, classes on tag. Remove these
props from the element. For details, see
https://facebook.github.io/react/warnings/unknown-prop.html
in thead (created by TableHead)
in TableHead (at table.js:15)
in _MyTableHead (created by Jss(_MyTableHead))
I think i am not doing it right, any idea ?
The way to customize components in the next branch is not documented yet.
This is how it can be done:
import React from 'react';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import {createMuiTheme} from 'material-ui/styles/theme'
import Button from 'material-ui/Button';
const muiTheme = createMuiTheme({
overrides:{
MuiButton:{
root:{
fontSize: 20,
}
}
}
});
class Main extends React.Component {
render() {
// MuiThemeProvider takes the theme as a property and passed it down the hierarchy
// using React's context feature.
return (
<MuiThemeProvider muiTheme={muiTheme}>
<Button raised>Default</Button>
</MuiThemeProvider>
);
}
}
export default Main;
Example Class from MUINext
Material UI regenerates new classes upon render, so you will never be able to override any one class with a preset class.
Their class name will look something like MuiRoot-tableHead-23. The last number is random.
Find the specific class that is overriding your class, and then use
[class*=MuiRoot-tableHead]{
your css settings
}
If you have a theme file already setup, I'd suggest going with what yossi said. Otherwise, you can manually override it using this method.