Hỏi cách dùng * { } trong css module

[Trongtinvd (Nguyễn Trọng Tín)]

Thì em có một đoạn code ví dụ như thế này

App.jsx

import React from 'react';
import MyComponent from './components/MyComponent'

class App extends React.Component{
    render(){
        return (
            <div>
                <p>black text</p>
                <MyComponent />
            </div>
        );
    }
}

export default App;

MyComponent.jsx

import React from 'react'
import styles from './myStyle.module.css'

class MyComponent extends React.Component{
    render(){
        return(
            <div>
                <p>red text 1</p>
                <p>red text 2</p>
            </div>
        )
    }
}

export default MyComponent

myStyle.module.css

* {
    color: red;
}

Em muốn sử dụng * { color: red } để đổi style tất cả các phần tử trong MyComponent sang chữ đỏ

Nhưng mà khi em sử dụng đoạn code đó thì <p>black text</p> trong App.jsx cũng bị đổi sang chữ đỏ mặc dù em ko có import myStyle.module.css vào App.jsx

Em muốn hỏi là phải làm thế nào để chọn hết các phần tử trong MyComponent.jsx và style các phần tử đó mà không ảnh hưởng đến các phần tử bên ngoài

* {color: red;} trên chỉ là ví dụ, trong cái project em đang làm em muốn dùng * { box-sizing: border-box; }

[hello22 (hello)]

tôi nghĩ bạn nên học tốt core đi rồi chơi framework =))

[Trongtinvd (Nguyễn Trọng Tín)]

Cảm ơn lời khuyên của bạn. Để mình đi học kỹ lại