@sinco/react 1.0.1-rc.6 → 1.0.1-rc.8
Sign up to get free protection for your applications and to get access to all the features.
- package/README.md +17 -10
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -8,19 +8,19 @@ npm i @sinco/react
|
|
|
8
8
|
|
|
9
9
|
## Pre-requisitos
|
|
10
10
|
|
|
11
|
-
React en la versión 18
|
|
12
|
-
https://mui.com/material-ui/getting-started/installation/
|
|
11
|
+
Asegúrate de tener instalado React en la versión 18. También, es necesario instalar Material-UI React. Puedes encontrar las instrucciones de instalación en el siguiente enlace: https://mui.com/material-ui/getting-started/installation/
|
|
13
12
|
|
|
14
13
|
## Fuentes web de Google
|
|
15
14
|
|
|
16
|
-
|
|
15
|
+
Puedes utilizar fuentes de Google Web Fonts en tu proyecto. Para hacerlo, agrega el siguiente fragmento de código dentro de la etiqueta `<head>` de tu proyecto:
|
|
17
16
|
|
|
18
17
|
`<link
|
|
19
18
|
rel="stylesheet"
|
|
20
19
|
href="https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;600;700&family=Roboto:wght@300;400;500;700&display=swap"
|
|
21
20
|
/>`
|
|
22
|
-
|
|
23
|
-
|
|
21
|
+
<br/>
|
|
22
|
+
Otra opción es instalar las fuentes Roboto y Nunito desde npm utilizando los paquetes
|
|
23
|
+
O ya sea instalando las fuentes [@fontsource/roboto](https://www.npmjs.com/package/@fontsource/roboto) y [@fontsource/nunito](https://www.npmjs.com/package/@fontsource/nunito) en su archivo `index.tsx`, los fontsource son que se necesitan son :
|
|
24
24
|
|
|
25
25
|
### Roboto
|
|
26
26
|
|
|
@@ -29,17 +29,24 @@ import '@fontsource/roboto/500.css';
|
|
|
29
29
|
|
|
30
30
|
### Nunito
|
|
31
31
|
|
|
32
|
+
import '@fontsource/roboto/300.css'; <br/>
|
|
32
33
|
import '@fontsource/roboto/400.css'; <br/>
|
|
33
|
-
import '@fontsource/roboto/500.css';
|
|
34
|
+
import '@fontsource/roboto/500.css'; <br/>
|
|
35
|
+
import '@fontsource/roboto/60.css';
|
|
34
36
|
|
|
35
37
|
Para usar el `Iconcomponent` de fuente, primero debe agregar la [fuente](https://mui.com/material-ui/getting-started/installation/#icons) Material Icons.
|
|
36
38
|
|
|
37
39
|
## Como utilizar
|
|
38
40
|
|
|
39
|
-
Para
|
|
40
|
-
`<ThemeProvider theme={SincoTheme}>` [theme](https://mui.com/material-ui/customization/theming/#themeprovider)
|
|
41
|
+
Para utilizar el tema personalizado de sinco react, debes envolver tu aplicación con el componente `ThemeProvider` de Material-UI y proporcionar la variable `SincoTheme` como valor del prop `theme` en el [ThemeProvider](https://mui.com/material-ui/customization/theming/#themeprovider)
|
|
41
42
|
|
|
42
43
|
## Más información
|
|
43
44
|
|
|
44
|
-
|
|
45
|
-
|
|
45
|
+
Puedes encontrar más información sobre cómo utilizar React y Material-UI en la documentación oficial:
|
|
46
|
+
|
|
47
|
+
- [React](https://es.react.dev/)
|
|
48
|
+
- [Material-UI](https://mui.com/material-ui/getting-started/overview/)
|
|
49
|
+
|
|
50
|
+
## Recomendaciones
|
|
51
|
+
|
|
52
|
+
Este paquete utiliza Data [Data grid pro](https://mui.com/x/react-data-grid/) para su tema personalizado. Si deseas utilizarlo, se recomienda instalar el paquete [@mui/x-data-grid](https://www.npmjs.com/package/@mui/x-data-grid).
|