Cảm xúc css có điều kiện

Hướng dẫn sau đây giả định rằng bạn đã quen thuộc với các khái niệm React và JSX. Tối thiểu, bạn nên có một số kinh nghiệm với JavaScript trước khi tiếp tục với hướng dẫn này. Có một số tài nguyên miễn phí tuyệt vời có sẵn tại freecodecamp. org, nếu không thì tiếp tục đọc

Sử dụng tên lớp tĩnh

Đặt tên lớp CSS vẫn là cách hiệu quả nhất để đảm bảo rằng bạn có thể tạo các kiểu có thể sử dụng lại cho các thành phần khác nhau của mình. Bằng cách sử dụng className values tĩnh, bạn có thể tạo kiểu từ kiểu trình chỉnh sửa chiến dịch và áp dụng chúng trong các phần khác nhau của trang web Raisely của mình

JavaScript

(RaiselyComponents) => {
    const PrimaryDiv = ({ children }) => (
        

    );

    const SecondaryDiv = ({ children }) => (
        

    );

    return () => (
        
            
            
        
    );
}

Raisely cũng cung cấp một số trình trợ giúp css để đảm bảo bạn có thể tận dụng tối đa các kiểu css của mình. Những người trợ giúp này bao gồm các phương tiện tạo kiểu cho các phần của thành phần dựa trên màu sắc, cũng như ẩn các phần của thành phần tùy thuộc vào trạng thái trang, chẳng hạn như nếu hồ sơ thuộc sở hữu của người dùng hiện tại hoặc trang hiện đang xem

Bạn có thể tìm thấy danh sách xuyên suốt các lớp trợ giúp của chúng tôi từ đây

JavaScript

(RaiselyComponents) => {
    // define both our campaign theme color aliases and their available shades
    const colorTypes = [
        'block-primary', 'block-secondary',
        'color-primary', 'color-secondary',
    ];

    const colorShades = [
        'super-light', 'lightest', 'lighter', 'light',
        'dark', 'darker', 'darkest',
    ];

    // generate list of class names for helper demo
    const colorHelperClasses = colorTypes.concat(...colorTypes.map(colorType => 
        colorShades.map(shadeName => `${colorType}-${shadeName}`)
    )).sort();

    // return mapping of available colors as simple div elements
    return () => colorHelperClasses.map(className => (
        

            {className}
        
    ));
}

Sử dụng cảm xúc

🚧Phần này đã được di chuyển (và cập nhật)

Bạn có thể xem tài liệu trợ giúp cảm xúc mới nhất tại đây

Emotion là một giải pháp kiểu động dựa trên Javascript được Raisely sử dụng nội bộ và cho các khía cạnh khác nhau của ứng dụng khách

Trình trợ giúp styled và css của Emotion cho phép bạn tạo các thành phần không phụ thuộc nhiều vào kiểu chiến dịch hiện có của bạn, vì HTML class mà chúng được chỉ định được thể hiện duy nhất khi nó được hiển thị

Điều này có nghĩa là không giống như các lớp CSS thông thường được nhắm mục tiêu dễ dàng hơn, các lớp và thành phần CSS được tạo bằng cảm xúc không dễ bị nhắm mục tiêu và sẽ không xung đột với các lớp tạo cảm xúc khác

Chữ

(RaiselyComponents) => {
    const { styled, css } = RaiselyComponents;

    // a HTML div that will have a unique className already assigned
    // to it via styled
    const MyRedDiv = styled('div')`
        color: #fff;
        background: #f00;
    `;

    // builds a reusable string that can be appended as a className
    const myBlueClass = css`
        color: #fff;
        background: #00f;
    `;

    return () => (
        
            
                Hi I'm Red!
            
            

                Hi I'm Blue!
            
        
    );
}

Như đã trình bày ở trên, những người trợ giúp cảm xúc cung cấp hai người trợ giúp; . Cả hai người trợ giúp này đều cung cấp phương tiện ngăn ngừa xung đột kiểu dáng trong các thành phần khác của bạn và các kiểu chủ đề chiến dịch hiện tại

Bạn có thể tìm hiểu thêm về cú pháp của Emotion từ tài liệu v9 của họ

Tạo kiểu cho các thành phần Raisely hiện có

Giới thiệu sơ lược về BEM

Phần lớn khách hàng hướng tới nhà tài trợ của Raisely sử dụng tiêu chuẩn đặt tên CSS được gọi là BEM, cho phép một cách minh bạch và có tính khai báo cao để mô tả các kiểu thành phần và cấu trúc phân cấp theo mẫu một chiều

Chúng tôi đã chọn điều này với mục đích chính là đảm bảo rằng các phong cách phía khách hàng có thể dễ dàng tùy chỉnh và thích ứng tùy thuộc vào các lựa chọn phong cách trong chiến dịch của riêng bạn

Dưới đây là một số tài nguyên tổng hợp tuyệt vời để tìm hiểu BEM ở cấp độ cơ bản

• https. // thủ thuật css. com/bem-101/
• https. // giải mã. io/hiểu-css-bem-đặt tên-quy ước-a8cca116d252
• https. //github. com/airbnb/css

Trong tương lai, chúng tôi sẽ phát hành hướng dẫn chuyên sâu hơn để áp dụng BEM theo cách cụ thể cho Raisely và cách tận dụng các phương pháp theo chủ đề nâng cao hơn

CX trong Cảm xúc là gì?

Emotion có sử dụng theo kiểu không

Là cảm xúc và phong cách

Cảm xúc được tạo kiểu trong MUI là gì?