Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit be2dad1

Browse files
author
vinogradov
committed
(feature) add more styling examples
1 parent 1795566 commit be2dad1

File tree

13 files changed

+129
-37
lines changed

13 files changed

+129
-37
lines changed

‎src/entry.js

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,4 +8,7 @@ import './examples/react/index';
88
// import './examples/redux/separate-files';
99
// import './examples/redux/separate-files-redux-actions';
1010
// import './examples/router';
11-
// import './examples/sass/Component1';
11+
// import './examples/styles/cssmodules-className';
12+
// import './examples/styles/cssmodules-className-sass';
13+
// import './examples/styles/cssmodules-styleName';
14+
// import './examples/styles/scss';

‎src/examples/react/__tests__/__snapshots__/hello.test.js.snap

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -5,19 +5,18 @@ exports[`renders correctly 1`] = `
55
<img
66
alt=""
77
src=""
8-
styleName="logo"
8+
style={
9+
Object {
10+
"width": "20px",
11+
}
12+
}
913
/>
1014
<div>
1115
Hello
12-
<span
13-
styleName="name"
14-
>
15-
John
16-
</span>
16+
John
1717
</div>
1818
<button
1919
onClick={[Function]}
20-
styleName="submit-button"
2120
>
2221
toggle:
2322
ON

‎src/examples/react/hello.css

Lines changed: 0 additions & 17 deletions
This file was deleted.

‎src/examples/react/hello.js

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import React from 'react';
22
import PropTypes from 'prop-types';
3-
import './hello.css';
43
import logo from './logo.svg';
54

65
export class Hello extends React.Component {
@@ -23,9 +22,9 @@ export class Hello extends React.Component {
2322
render() {
2423
return (
2524
<div>
26-
<img src={logo}styleName="logo" alt="" />
27-
<div>Hello <spanstyleName="name">{this.props.name}</span></div>
28-
<button styleName="submit-button"onClick={this.onClickHandler}>
25+
<img style={{width: '20px'}}src={logo} alt="" />
26+
<div>Hello {this.props.name}</div>
27+
<button onClick={this.onClickHandler}>
2928
toggle: {this.state.toggle ? 'ON' : 'OFF'}
3029
</button>
3130
</div>
Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import React from 'react';
2+
import ReactDOM from 'react-dom';
3+
import style from './style.sass';
4+
5+
function CssModulesClassNameSass() {
6+
return (
7+
<div className={style.parent}>
8+
<div className={style.child} />
9+
</div>
10+
);
11+
}
12+
13+
ReactDOM.render(
14+
<CssModulesClassNameSass />,
15+
document.querySelector('#app')
16+
);
Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
$backgroundColor: yellow
2+
3+
.parent
4+
.child
5+
background-color: $backgroundColor
6+
width: 100px
7+
height: 100px
Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import React from 'react';
2+
import ReactDOM from 'react-dom';
3+
import style from './style.css';
4+
5+
function CssModulesClassName() {
6+
return (
7+
<div className={style.myBlock} />
8+
);
9+
}
10+
11+
ReactDOM.render(
12+
<CssModulesClassName />,
13+
document.querySelector('#app')
14+
);
Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,9 @@
1-
.foo {
1+
.primaryColor {
2+
background-color: red;
3+
}
4+
5+
.myBlock {
6+
composes: primaryColor;
27
width: 100px;
38
height: 100px;
4-
background-color: red;
59
}
Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import React from 'react';
2+
import ReactDOM from 'react-dom';
3+
import './style.css';
4+
5+
// see react-css-modules in webpack config
6+
7+
function CssModulesStyleName() {
8+
return (
9+
<div styleName="myBlock" />
10+
);
11+
}
12+
13+
ReactDOM.render(
14+
<CssModulesStyleName />,
15+
document.querySelector('#app')
16+
);
Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
.primaryColor {
2+
background-color: green;
3+
}
4+
5+
.myBlock {
6+
composes: primaryColor;
7+
width: 100px;
8+
height: 100px;
9+
}

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /