Bạn có thể sử dụng giao diện người dùng vật liệu với SCSS không?

Question

Vật liệu phản ứng-UI

bởi John Vincent

Nội dung chính Show

Bạn có thể sử dụng giao diện người dùng vật liệu với phong cách
Bạn có thể React bằng SCSS không?
SCSS có thể được sử dụng theo kiểu không
Tôi có thể sử dụng SCSS trong các mô-đun CSS không?

Đăng ngày 27/05/2018

Bài viết này mô tả cách định cấu hình React với Material-UI và Sass

Chung

Vật liệu-UI

Cài đặt

Tôi đang làm việc với phiên bản tiếp theo của Material-UI

Cài đặt Vật liệu-UI

npm install --save material-ui@next
npm install --save material-ui-icons@next

hoặc, cụ thể hơn

npm install --save [email protected]
npm install --save [email protected]

Material-UI khuyến khích sử dụng một số tính năng ngôn ngữ không chuẩn. cài đặt những

npm install babel-plugin-transform-class-properties --save-dev
npm install babel-plugin-transform-object-rest-spread --save-dev

Cập nhật

npm install --save [email protected]
npm install --save [email protected]

8

{
"presets": ["env", "react"],
"plugins": ["transform-object-rest-spread", "transform-class-properties"]
}

Cập nhật

npm install --save [email protected]
npm install --save [email protected]

9

{
	"extends": ["airbnb", "prettier"],
	"env": {
		"browser": true
	},
	"parser": "babel-eslint",
	"globals": {},
	"rules": {
		"no-console": 0,
		"max-len": [
			"error",
			{
				"code": 100,
				"tabWidth": 2,
				"comments": 100,
				"ignoreTrailingComments": true,
				"ignoreUrls": true,
				"ignorePattern": "^import\\s.+\\sfrom\\s.+;$"
			}
		],
		"indent": [2, "tab", { "SwitchCase": 1 }],
		"no-tabs": 0,
		"react/jsx-indent": ["off", 2],
		"react/jsx-indent-props": ["off", 2],
		"jsx-a11y/anchor-is-valid": [
			"error",
			{
				"components": ["Link"],
				"specialLink": ["to"]
			}
		]
	},
	"plugins": ["react", "jsx-a11y", "import"]
}

Các tính năng ngôn ngữ nâng cao yêu cầu sử dụng

npm install babel-plugin-transform-class-properties --save-dev
npm install babel-plugin-transform-object-rest-spread --save-dev

0

________số 8

Cập nhật

npm install babel-plugin-transform-class-properties --save-dev
npm install babel-plugin-transform-object-rest-spread --save-dev

1

npm install --save [email protected]
npm install --save [email protected]

0

Lưu ý có 2 phần Sass

Mã Sass được gộp vào

npm install babel-plugin-transform-class-properties --save-dev
npm install babel-plugin-transform-object-rest-spread --save-dev

2 nằm trong

npm install babel-plugin-transform-class-properties --save-dev
npm install babel-plugin-transform-object-rest-spread --save-dev

3. Mã này được biên dịch, tải và đóng gói bằng cách sử dụng

npm install babel-plugin-transform-class-properties --save-dev
npm install babel-plugin-transform-object-rest-spread --save-dev

4

Mã Sass sẽ được chèn dưới dạng kiểu vào thành phần React nằm trong thư mục
```
npm install babel-plugin-transform-class-properties --save-dev
npm install babel-plugin-transform-object-rest-spread --save-dev
```
5. Mã Sass dự kiến sẽ nằm cùng với thành phần nhập nó. Mã này được biên dịch, tải và đưa trình tải kiểu vào JavaScript

Cấu hình cơ bản

Điểm vào thông thường,

npm install babel-plugin-transform-class-properties --save-dev
npm install babel-plugin-transform-object-rest-spread --save-dev

6

npm install --save [email protected]
npm install --save [email protected]

6

Sử dụng

npm install babel-plugin-transform-class-properties --save-dev
npm install babel-plugin-transform-object-rest-spread --save-dev

7

npm install --save [email protected]
npm install --save [email protected]

8

tiêm sass

thành phần scss

npm install --save [email protected]
npm install --save [email protected]

9

Sass để tiêm,

npm install babel-plugin-transform-class-properties --save-dev
npm install babel-plugin-transform-object-rest-spread --save-dev

8

npm install --save [email protected]
npm install --save [email protected]

0

Lưu ý việc sử dụng. quan trọng để ghi đè lựa chọn màu của Material-UI

Phá vỡ điều này

npm install --save [email protected]
npm install --save [email protected]

1

tải chủ đề

npm install --save [email protected]
npm install --save [email protected]

2

sử dụng chủ đề này

npm install --save [email protected]
npm install --save [email protected]

3

hướng dẫn thành phần Nút vật liệu-UI sử dụng các lớp được xác định trong

npm install babel-plugin-transform-class-properties --save-dev
npm install babel-plugin-transform-object-rest-spread --save-dev

9

npm install --save [email protected]
npm install --save [email protected]

4

hướng dẫn div sử dụng lớp "chính", được định nghĩa trong

npm install babel-plugin-transform-class-properties --save-dev
npm install babel-plugin-transform-object-rest-spread --save-dev

9

npm install --save [email protected]
npm install --save [email protected]

5

tham khảo các lớp được định nghĩa trong gói scss, ví dụ

{
"presets": ["env", "react"],
"plugins": ["transform-object-rest-spread", "transform-class-properties"]
}

1

npm install --save [email protected]
npm install --save [email protected]

6

{
"presets": ["env", "react"],
"plugins": ["transform-object-rest-spread", "transform-class-properties"]
}

2

npm install --save [email protected]
npm install --save [email protected]

7

Material-UIJavascript tại HackerRank

Bạn có thể sử dụng giao diện người dùng vật liệu với phong cách

Thay đổi công cụ tạo kiểu mặc định . Tuy nhiên, nếu bạn muốn sử dụng styled-components , bạn có thể định cấu hình ứng dụng của mình bằng cách làm theo hướng dẫn về công cụ được tạo kiểu hoặc bắt đầu với một trong các dự án mẫu. Tạo ứng dụng React với styled-components .

Bạn có thể React bằng SCSS không?

Tôi có thể sử dụng Sass không? . Bây giờ bạn đã sẵn sàng đưa các tệp Sass vào dự án của mình. If you use the create-react-app in your project, you can easily install and use Sass in your React projects. Now you are ready to include Sass files in your project!

SCSS có thể được sử dụng theo kiểu không

Trong SCSS, bạn có thể sử dụng các biến và công thức để thể hiện các biến thể về màu sắc, cỡ chữ, độ rộng và khoảng cách. Tuy nhiên, khi bạn chuyển từ SCSS sang các thành phần được tạo kiểu, cú pháp không còn hiệu lực nữa . Các tệp thành phần được tạo kiểu là CSS-in-JS, vì vậy chúng thực sự là các tệp JavaScript.

Tôi có thể sử dụng SCSS trong các mô-đun CSS không?

Tại sao lại sử dụng Mô-đun CSS với SCSS. Mô-đun CSS cho phép bạn có kiểu dáng mô-đun trong các thành phần của mình . Điều này có nghĩa là không còn xung đột tên lớp trong ứng dụng của bạn. Trong khi đó, SCSS là Bộ tiền xử lý CSS cho phép bạn thực hiện các khả năng như kết hợp, biến toàn cục, lồng nhau, v.v.

programming css

Bạn có thể sử dụng giao diện người dùng vật liệu với SCSS không?

tiêm sass

Bạn có thể sử dụng giao diện người dùng vật liệu với phong cách

Bạn có thể React bằng SCSS không?

SCSS có thể được sử dụng theo kiểu không

Tôi có thể sử dụng SCSS trong các mô-đun CSS không?

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội